Javascript 使用ajax的表单有问题吗_Javascript_Html_Ajax_Jquery Mobile

Javascript 使用ajax的表单有问题吗

javascript html ajax jquery-mobile

Javascript 使用ajax的表单有问题吗,javascript,html,ajax,jquery-mobile,Javascript,Html,Ajax,Jquery Mobile,大家好，我是jquery mobile的新手，我不知道如何执行以下操作。 1我需要一个下拉/选择菜单，用户可以从中选择 2在用户选择一个值后，他/她可以按submit按钮并从Ajax URL jonsp文件中的链接获取行程的英里数。这里我需要传递用户在表单中选择的值 var dataForm = $("form").serialize(); 这似乎很简单，但正如我所说，我是新的，下面就是我所能做到的 <html> <head> <meta na

大家好，我是jquery mobile的新手，我不知道如何执行以下操作。

1我需要一个下拉/选择菜单，用户可以从中选择

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

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

这似乎很简单，但正如我所说，我是新的，下面就是我所能做到的

 <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>

您需要从单击函数中的选择中读取值

var值=$selector.val

试试这个：

// 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;
});

可以使用serialize获取包含表单的数据

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));
    });

你好，谢谢你的快速回复。它确实有效，但如果我多次单击submit，它会不断追加相同的值，因此文本看起来像5.375.375.375.375.375.375.37。有什么办法可以防止这种情况发生吗？刚刚编辑了我的回答太棒了！谢谢你=最后一个问题。如果我想去掉Submit按钮，让javascript在用户从下拉菜单中做出选择后执行，该怎么办。可能吗？或者我真的需要提交按钮吗？只需使用$'cars'。在'change'上，函数{$'form.Submit；}；这真的没有道理。如果问题不清楚，那么提交答案的人是如何理解的？如果我没有得到任何答复，或者如果我收到澄清请求，我可以理解。不管怎样，我只是觉得这样做很可笑。