jquery ajax函数不起作用答案

【问题标题】：jquery ajax function not workingjquery ajax函数不起作用
【发布时间】：2014-03-14 20:27:18
【问题描述】：

我的html是这样的，

<form name="postcontent" id="postcontent">
    <input name="postsubmit" type="submit" id="postsubmit" value="POST"/>
    <textarea id="postdata" name="postdata" placeholder="What's Up ?"></textarea>
</form>

jquery代码如下

$("#postcontent").submit(function(e) {
    $.ajax({
        type:"POST",
        url:"add_new_post.php",
        data:$("#postcontent").serialize(),
        beforeSend:function(){
            $(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
        },success:function(response){   
            //alert(response);
            $("#return_update_msg").html(response); 
            $(".post_submitting").fadeOut(1000);                
        }
    });
});

当我点击提交按钮时，我的 ajax 请求不起作用，看起来好像控件正在传递给 JQuery 提交函数，但是 ajax 请求没有执行/正常工作，这是怎么回事？

【问题讨论】：

您遇到的错误是什么？
没有错误，只是ajax调用不工作
@KiranGopalakrishnan 你是怎么解决的？还是不行？
@KiranGopalakrishnan 你是怎么解决的？如果您分享解决方案会很好......

标签： jquery html ajax

【解决方案1】：

试试这个代码

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<Script>
$(document).ready(function(){

$("#postcontent").click(function(e) {

        $.ajax({type:"POST",url:"add_new_post.php",data:$("#postcontent").serialize(),beforeSend:function(){
            $(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
        },success:function(response){   
                    //alert(response);
                    $("#return_update_msg").html(response); 
                    $(".post_submitting").fadeOut(1000);                
            }
        });
   });
});
   </script>

<form name="postcontent" id="postcontent">
              <input name="postsubmit" type="button" id="postsubmit" value="POST"/>
              <textarea id="postdata" name="postdata" placeholder="What's Up ?"></textarea>
 </form>

【讨论】：

【解决方案2】：

您需要在提交时防止表单的默认行为

通过添加：

$("#postcontent").on('submit' , function(e) {

  e.preventDefault();

  //then the rest of your code
}

【讨论】：

@KiranGopalakrishnan 添加 method="POST" 在您的表单中，因为您使用的是帖子值

【解决方案3】：

试一试：

<form name="postcontent" id="postcontent">
    <input name="postsubmit" type="submit" id="postsubmit" value="POST"/>
    <textarea id="postdata" name="postdata" placeholder="What's Up ?"></textarea>
</form>
<script>
    (function() {
        $("#postcontent").on('submit', function(e) {
            e.preventDefault();
        $.ajax({
            type:"POST",
            url:"add_new_post.php",
            data:$("#postcontent").serialize(),
            beforeSend:function(){
                $(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
            },success:function(response){   
                //alert(response);
                $("#return_update_msg").html(response); 
                $(".post_submitting").fadeOut(1000);                
            }
        });
   });
})();
</script>

【讨论】：

【解决方案4】：

将事件处理函数放在 $(document).ready(function(){...}) 中。现在应该可以工作了

还添加 preventDefault() 来限制页面刷新

$(document).ready(function() {

            $("#postcontent").submit(function(e) {
                e.preventDefault();
                $.ajax({
                    type : "POST",
                    url : "add_new_post.php",
                    data : $("#postcontent").serialize(),
                    beforeSend : function() {
                          $(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
                    },
                    success : function(response) {
                        alert(response);
                        $("#return_update_msg").html(response);
                        $(".post_submitting").fadeOut(1000);
                    }
                });
                e.preventDefault();
            });

        });

【讨论】：

我确实在 $(document).ready();但仍然无法正常工作。有什么想法吗？

【解决方案5】：

试试这个

    $("#postcontent").submit(function() {
  return false;
};

$('#postsubmit').click(function(){

// your ajax request here
});

【讨论】：

【解决方案6】：

我认为你已经把 e.preventDefault();在 ajax 调用之前，这就是它阻止调用该函数并且您的 Ajax 调用不会调用的原因。

所以尝试在 Ajax 调用之前删除 e.prevent Default() 并将其添加到 after Ajax 调用中。

【讨论】：

这就是我要找的。谢谢。

【解决方案7】：

为了文档。我花了两天时间解决一个 ajax 问题，今天下午开始测试时，我的 PHP ajax 处理程序没有被调用....

非常令人沮丧。

我的问题的解决方案（可能帮助其他人）是 add_action 的优先级。

add_action('wp_ajax_(我的处理程序), array('class_name', 'static_function'), 1);

回想一下默认优先级 = 10

我的返回码为零，但我的任何代码都没有被调用。

...注意到这不是 WordPress 的问题，我可能在这个问题上说错了。我很抱歉。

【讨论】：

【解决方案8】：

我正在做这样的代码

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
    src="http://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
    $(document).ready(function () {

        $(".work-category a").click(function (e) {
            e.preventDefault();
            var id = $(this).attr('data-id');
            $.ajax({
                url: 'process.php',
                method: 'POST',
                data: {
                    clickCategoryID : id
                },
                dataType: 'JSON',
                success: function (data) {
                    $("#content-area").html(data.Content);
                    $(".container-area").animate({top: '100px'}, 1000);
                    $(".single-content").animate({opacity:1}, 1000);
                }
            });
        });

    });
</script>

但是代码没有运行，虽然我上面有代码，但找不到控制台 saya process.php。

【讨论】：

这表明您在 html 文件所在的同一文件夹内有 process.php，是这样吗？

【解决方案9】：

我遇到了这个问题，但这些答案都无法帮助我解决这个问题。对于碰巧遇到同样问题的其他人，这里有一个对我有用的可能解决方案。只需将代码重新格式化为以下内容：

$("#postcontent").submit(function(e) {
  $.ajax({
    type:"POST",
    url:"add_new_post.php",
    data:$("#postcontent").serialize(),
    beforeSend:function(){
      $(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
    },
    success (response) {   
      //alert(response);
      $("#return_update_msg").html(response); 
      $(".post_submitting").fadeOut(1000);                
    },
    error (data) {
      // handle the error
    }
  });
});

代码的不同之处在于这段代码有一个错误处理程序。您可以根据需要选择处理错误，但最好的做法是在出现异常时使用错误处理程序。此外，ajax 函数中成功和错误函数的格式也不同。这是唯一适合我的成功/错误格式。希望对您有所帮助！

【讨论】：

【解决方案10】：

我的html和js代码

<script>
$(".editTest23").change(function () {

        var test_date = $(this).data('');id
        // alert(status_id);    

        $.ajax({
            type: "POST",
            url: "Doctor/getTestData",
            data: {
                test_data: test_date,
            },
            dataType: "text",
            success: function (data) {
                $('#prepend_here_test1').html(data);
            }
        });
        // you have missed this bracket
        return false;
    });
</script>

在php代码中

    foreach($patitent_data as $result){

        $result_html .="<tr class='test_record'>\
        <td><input type='text' name='test_name' value='$result->test_name' class='form-control'></td>\
        <td><textarea class='form-control' name='instruction'> $result->instruction </textarea>\
        </td>\
        <td><button class='close remove_test_record' aria-hidden='true'>&times;</button></td>\
     </tr>";
    }

    echo json_encode($result_html)

【讨论】：