php - 使用ajax从php发送和返回值时，为什么我会收到javascript和html代码？

Question

今天我用下面的代码尝试了 Ajax。逻辑似乎是正确的，因为成功函数正在触发，但我无法从 php 文件获取返回值，而是在提醒响应时获取 Javascript 和 html 代码。

示例1.php

 <?php
    echo $_POST['name'];
 ?>
<form action="?" method="post">
<input type="text" id="d1" name="name" value="">
<input type="text" id="d2" name="place" value="">
<input id="target" type="submit" name="submit" value="send">
</form> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#target").click(function()
{
var data1=$("#d1").val();
var data2=$("#d2").val();
$.ajax
({
type:"POST",
url:"example1.php",
data:{name:data1,place:data2},
success:function(msg)
{
alert(msg);
}
});
return false;
});
});
</script>

当我运行 example1.php 时，它会显示如下所示的警报消息 提交的姓名

<form action="?" method="post">
<input type="text" id="d1" name="name" value="">
<input type="text" id="d2" name="place" value="">
<input id="target" type="submit" name="submit" value="send">
</form> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#target").click(function()
{
var data1=$("#d1").val();
var data2=$("#d2").val();
$.ajax
({
type:"POST",
url:"arithmetic.php",
data:{name:data1,place:data2},
success:function(msg)
{
alert(msg);
}
});
return false;
});
});
</script>

为什么我从 example1.php 中得到这个而不是名称和位置值？

Answer 1

更新考虑到问题发生了变化

您将发布到表单所在的同一文件，因此您的响应包括该页面中的 HTML 代码。您必须发布到仅响应您想要的内容的不同 PHP 文件，或者更改当前文件以在发布某些数据时以不同方式响应。

<小时/>

您的 ajax 请求不会发送到 response.php，因为您告诉 jQuery 发布到不同的 URL:

url:"arithmetic.php",

将其更改为response.php。

<小时/>

为了保证您始终使用 ajax 发布，您应该绑定(bind)到表单的 submit 事件，而不是单击提交按钮:

$('form').submit(function(e) {

    // ajax stuff

    // prevent default (submit)
    return false;
});

使用您当前的代码，如果您在关注这些输入字段之一时按 Enter 键，则表单将在不使用 ajax 的情况下提交。