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

1）查找网络标头中的console.log错误或错误
2）确保你在.php脚本中请求ajax，主要标题允许访问控制。
3）有时，标题不允许您提出要求。
4）发出请求时，保持控制台打开（F12）并启用Log 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 2

我测试了你的代码，它几乎可以正常工作。我改变的唯一一件事就是从绝对http://localhost/my_projects/testing/moremore.php到相对moremore.php的ajax网址，如果你的网站被剔除，我会投入official 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 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);

为什么$ .ajax不适用于我？

3 个答案: