为什么$.ajax不和我一起工作？

Question

我不知道为什么$.ajax从来不调用我的代码？我使用xampp作为localhost jquery，名为ok，所以当我单击按钮时，下面的文本发生了变化。但是$.ajax部件从来不执行？

我的页面：

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="layout/css/bootstrap.css">
<link rel="stylesheet" href="layout/css/font-awesome.min.css">
<link rel="stylesheet" href="layout/css/mystyle.css">
</head>
<body>
<div class="container">
<div class="alert alert-danger"> alerts alerts </div>
<div class="alert alert-danger"> alerts alerts </div>
<div class="alert alert-danger"> alerts alerts </div>
<button id="btn" class="btn btn-primary">cliquer ici </button>
</div>
<script type="text/javascript" src="layout/js/jquery-1.12.4.min.js">
</script>
<script type="text/javascript" src="layout/js/bootstrap.min.js"></script>
<script type="text/javascript" src="layout/js/myjs.js"></script>
</body>
</html>

我的js：

$(document).on('click','#btn',function(){
    var ID =$(this).attr('id');
    $(this).html("loading ... ");
    $.ajax({
        type:"POST",
        url:"http://localhost/my_projects/testing/moremore.php",
        data:"id="+ID,
        success: function(html){
            $('.container').append(html);
            $('#btn').html("done");
        }
    });
    $(this).html("hmmmm ... ");
});

我的moremore.php：

<div class="alert alert-success"> alerts alerts by ajax </div>

Answer 1

我测试了您的代码，它基本上可以正常工作。我唯一改变的是从绝对http://localhost/my_projects/testing/moremore.php到相对moremore.php的ajax url，我还添加了官方jQuery CDN，以防您的官方jQuery CDN被篡改。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="http://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="layout/css/bootstrap.css">
<link rel="stylesheet" href="layout/css/font-awesome.min.css">
<link rel="stylesheet" href="layout/css/mystyle.css">
</head>
<body>
<div class="container">
<div class="alert alert-danger"> alerts alerts </div>
<div class="alert alert-danger"> alerts alerts </div>
<div class="alert alert-danger"> alerts alerts </div>
<button id="btn" class="btn btn-primary">cliquer ici </button>
</div>
<script>
$(document).on('click','#btn',function(){
    var ID =$(this).attr('id');
    $(this).html("loading ... ");
    $.ajax({
        type:"POST",
        url:"moremore.php",
        data:"id="+ID,
        success: function(html){
            $('.container').append(html);
            $('#btn').html("done");
        }
    });
    $(this).html("hmmmm ... ");
});
</script>
<script type="text/javascript" src="layout/js/bootstrap.min.js"></script>
<script type="text/javascript" src="layout/js/myjs.js"></script>
</body>
</html>

moremore.php

<div class="alert alert-success"> alerts alerts by ajax </div>

在几次单击之后，这个预期输出的结果：

​

​

Answer 2

1)查找网络报头中的console.log错误或错误

2)确保在请求ajax的.php脚本中有允许访问控制的主要头文件。

3)有时，标头不允许您请求。

4)在发出请求时，请打开控制台(F12)并启用日志XMLhttpRequest

尝试将这些头添加到moremore.php中

header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");
header("Access-Control-Allow-Origin: http://localhost");

另外，为了尝试一下，使用ajax头检查ajax请求，在moremore.php中也添加如下内容：

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
     echo '<div class="alert alert-success"> alerts alerts by ajax </div>';
} else {
    echo 'no ajax';
}

这将使您了解ajax请求是否正常工作。

新ajax js：

$(document).ready(function() {
  $('#btn').click(function() {
    var ID = $(this).attr('id');
    $(this).html("Loading ... ");
    $.ajax({
      type: "POST",
      url: "http://localhost/my_projects/testing/moremore.php",
      data: {
        id: ID
      },
      cache: false,
      xhrFields: {
        withCredentials: true
      },
      dataType: html,
      success: function(html) {
        $('.container').append(html);
        $('#btn').html("done");
      },
      error: function() {
        alert("Something went wrong");
        $("#btn").html("hmmmm, it was called... ");
      }
    });
  });
});

请留言寻求更多帮助！

Answer 3

尝试包装匿名函数，并将选择器文档更改为“#btn”

(function($) {
$('#btn').on('click',function(){
    var ID =$(this).attr('id');
    $(this).html("loading ... ");
$.ajax({
    type:"POST",
    url:"http://localhost/my_projects/testing/moremore.php",
    data:"id="+ID,
    success: function(html){
        $('.container').append(html);
        $('#btn').html("done");
    }
});
$(this).html("hmmmm ... ");
   });
})(jQuery);