Question

我很难用$ .ajax（）。我有这个HTML页面：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <form name="gettr" id="gettr">
         <input type="hidden" name="lang" value="ro">
         <input type="text" name="tickkey" id="tickkey" value="">
         <br>
         <input type="submit" value="Send" id="submit">
         <input type="reset" value="Cancel" onclick="$(&quot;#hereinfo&quot;).html(&quot;&quot;);">
        </form>
    </body>
</html>

脚本：

$("#gettr").submit(function() {

    var url = "handler.php"; 

    $.ajax({
           type: "GET",
           url: url,
           dataType: "application/json",
           data: $("#gettr").serialize(), // serializes the form's elements.
           success: function(data) {
               alert('Done');
           }
         });

    return false; 
});

我现在正在本地运行脚本，我的问题是脚本没有做任何事情。当我点击发送按钮时，它只是在地址栏的url末尾添加了?lang=ro&tickkey=value_inputed_in_the_form。我应该怎么做才能将服务器返回的JSON存储在变量中？

谢谢！

Answer 1

我认为您的查询变量附加到url的原因是因为您在DOM加载之前执行了脚本。您应该将脚本包装在$(document).ready(function () { });处理程序中。

使用event.preventDefault()代替return false;。但为什么不return false;看here

$(document).ready(function () { //Let the DOM be loaded

   $("#gettr").submit(function(event) {
    event.preventDefault(); //Prevent window default behaviour

    var url = "handler.php"; 

    $.ajax({
           type: "GET",
           url: url,
           dataType: "application/json",
           data: $("#gettr").serialize(), // serializes the form's elements.
           success: function(data) {
               alert(data);               //Alert your json data from server
           }
         });
    });
    //remember remove return false; because you're already preventing default behaviour
});

Answer 2

确保DOM已准备好并在执行AJAX请求之前阻止表单提交。

var dataFromServer = {};

// Document ready.
$(function() {

    $( '#gettr' ).on( 'submit', function( event ) {

        // Prevent form submission.
        event.preventDefault();            

        // AJAX request.
        var url = 'handler.php'; 
        $.ajax({
           type: 'GET',
           url: url,
           dataType: 'application/json',
           data: $( '#gettr' ).serialize(),
           success: function( data ) {               
                dataFromServer  = data;
           }
        });
    });

});

Answer 3

尝试调用preventDefault（）;

$("#gettr").submit(function(event) {
    event.preventDefault();

将JSON放在变量中

3 个答案: