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

Question

Today I tried Ajax with the below code. Logic seems to be correct because success function is triggering but i can't able to get return value from php file, instead i'm getting Javascript and html code when i alert the response.

example1.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>

When i run the example1.php it shows the alert message like given below Submitted 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:"arithmetic.php",
data:{name:data1,place:data2},
success:function(msg)
{
alert(msg);
}
});
return false;
});
});
</script>

Why am i getting this instead of name and place value from example1.php?

Answer 1

UPDATE considering that the question changed

You're posting to the same file where the form is, so your response includes the HTML code in that page. You have to post to a different PHP file that only responds with the content you want, or change your current file to respond differently if some data was posted.

---

Your ajax request is not going to response.php , because you told jQuery to post to a different URL:

url:"arithmetic.php",

Change that to response.php.

---

To guarantee you always post with ajax, you should bind to the form's submit event, instead of the submit button click:

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

    // ajax stuff

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

With your current code, the form will submit without ajax if you hit enter while focused on one of those input fields.

Answer 2

Change your response code as follows. You need to stop execution after writing your response.

<?php 
if(isset($_POST['name'])) {
echo $_POST['name']; 
echo $_POST['place']; 
exit(0); 
} 
?> 

Answer 3

chage the url to url:"response.php"

and write the code in responce.php like this

$name=$_POST["name"];
$place=$_POST["place"];