Question

我试图写一个简短的ajax代码来回应“你好”这个词。到了屏幕，但到目前为止我没有运气。如果有人知道我做错了什么，请纠正我，让我知道。谢谢。

test6.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript"> 

function myAjax() {
      $.ajax({
           type: "POST",
           url: 'testing.php',
           data:{action:'call_this'},
           error: function(xhr,status,error){alert(error);},
           success:function(html) {
             alert(html);
           }

      });
}

</script>

<a href="#" onclick="myAjax()">echo hello</a>

testing.php

<?php

if($_POST['action'] == 'call_this') {
  echo "hello";
}

?>

Answer 1

你有两个问题。首先，您有语法错误。您需要error之后的逗号：

function myAjax() {
      $.ajax({
           type: "POST",
           url: 'testing.php',
           data:{action:'call_this'},
           error: function(xhr,status,error){alert(error);} /* this comma --> */ , 
           success:function(html) {
             alert(html);
           }

      });
}

其次，由于您使用的是锚点（<a>）标记，因此当您单击标记时，它会跟随链接。你必须防止这种情况发生。你可以：

不使用<a>标记
将href添加到#或javascript:void(0)
使其调用的函数返回false
使用event.preventDefault

在 JSFiddle

上查看

修改

另外，您可能更喜欢使用JavaScript来绑定事件处理程序。通过这种方式，您可以进一步分离JS和HTML，这通常是首选。这样的事情应该有效：

$("#sendAjax").click(function(event) { event.preventDefault(); $.ajax({ type: "POST", url: '/echo/html/', data:{html:'call_this'}, error: function(xhr,status,error){alert(error);}, success:function(html) { console.log(html); $("#result").text(html); } }); });

然后在您的HTML中，您不需要onclick处理程序：

<a href="#" id="sendAjax">echo hello</a>

在 JSFiddle
上查看

Answer 2

我对您的代码进行了一些细微更改，例如为“动作”添加引号，并创建了一个按钮，因为<A HREF在点击事件方面存在一些问题（按钮不具备这些功能）问题），现在它对我来说很有用，请告诉我它是否适合你：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type = "text/javascript">
function myAjax () {
$.ajax( { type : 'POST',
          data : {'action':'call_this'},
          url  : 'testing.php',
          success: function ( data ) {
            document.getElementById( "my_div" ).innerHTML = data;
          },
          error: function ( xhr ) {
            alert( "error" );
          }
        });
}
    </script>
  </head>
  <body>
    <a href="" onclick="myAjax()">echo hello</a>
    <br/><br/>
    <button onclick="myAjax()">echo hello</button>
    <br/><br/>
    <div id="my_div"></div>
  </body>
</html>

使用AJAX PHP回显屏幕

2 个答案: