Question

大家好，我是jquery mobile的新手，我很难搞清楚如何执行以下操作。

1）我需要一个用户可以选择的下拉/选择菜单。

2）用户选择一个值后，他/她可以按下提交按钮，从Ajax URL（jonsp文件）中的链接获取行程里程。在这里，我需要传递用户在表单中选择的值。

看起来很简单，但就像我说的那样，我是新的，而且就我而言。

 <html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
   </head>

   <!--BODY -->
   <body>
       <!-- PAGE -->
       <div data-role="page" id="form_page">
           <!-- HEADER -->
       <div data-role="header" data-position="fixed" data-tap-toggle="false">   
       <h1>Header</h1>
        </div>
        <!-- END HEADER -->

        <!-- CONTENT -->
        <div data-role="main" class="ui-content">
            <form method="get">
                <fieldset class="ui-field-contain">
                    <label for="cars">Select Day</label>
                    <select name="cars" id="cars" data-native-menu="false">
                        <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="C">C</option>
                        <option value="D">D</option>
                        <option value="E">E</option>
                        <option value="F">F</option>
                        <option value="G">G</option>
                        <option value="H">H</option>
                    </select>
                </fieldset>
                <input type="submit" data-inline="true" value="Submit">
            </form>

            <div id="result">
            </div>
        </div>
        <!-- END CONTENT -->

        <!-- FOOTER -->
        <div data-role="footer" data-position="fixed" data-tap-toggle="false"> <h1>Footer</h1> </div>
        <!-- END FOOTER -->
    </div> 
    <!-- END PAGE -->
</body>
<!-- END BODY -->
<script>
$(document).ready(function(){
    $("#my_button").click(function(){
        $.ajax({
            url: 'https://api.wmata.com/Rail.svc/json/jSrcStationToDstStationInfo?FromStationCode=A15&ToStationCode=A12&api_key=kfgpmgvfgacx98de9q3xazww',
            dataType: 'jsonp',
        }).success(function (data){
            $("#result").append($(data.StationToStationInfos[0].CompositeMiles));
        });
    }); 
});
</script>
 </html>

Answer 1

试试这个：

// Catch form submission
$('form').on('submit', function(){
   // Make your AJAX call
   $.ajax({
      url: 'myUrl', // Your url
      method: $('form').attr('method'),
      dataType: 'jsonp',
      data: {cars: $('#cars').val()}, // Your data that you want to submit
      // data: $('form').serialize() if you have more than one data on your form
      success : function(jsonp) {
        // jsonp is the returned values from your backend application
        // MY CODE
        $("#result").html('');
        $("#result").append($(data.StationToStationInfos[0].CompositeMiles));
        // or easier  $("#result").html($(data.StationToStationInfos[0].CompositeMiles));
      }
   });

   // Prevent default submission
   return false;
});

Answer 2

您需要在点击功能中读取select中的值。

var value = $("selector").val();

Answer 3

您可以使用serialize() method获取包含表单的数据。

var dataForm = $("form").serialize();

然后在AJAX中，您需要设置要发送到服务器的数据并指定方法：

    $.ajax({
        url: 'https://api.wmata.com/Rail.svc/json/jSrcStationToDstStationInfo?FromStationCode=A15&ToStationCode=A12&api_key=kfgpmgvfgacx98de9q3xazww',
        dataType: 'jsonp',
        data: dataForm,
        method: "post",
    }).success(function (data){
        $("#result").append($(data.StationToStationInfos[0].CompositeMiles));
    });

使用ajax的表单有问题

3 个答案: