Cant get jQuery ajax to work
I am trying to convert my webpage to ajax but I cant get it to return anything.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
// events
$("#test").click(function(){
var myData;
myData = makeDataVar();
sendData(myData);
});
// functions
function makeDataVar(){
return "name=joe&location=bostin";
}
function sendData(myData){
alert("start mydata function");
$.ajax({
type: "POST",
url: "http://www.mypage.com/submitMe.php",
dataType : "json",
data: myData,
success: function (msg) {
alert("Data saved: " + nameMsg);
alert("Data saved: " + locationMsg);
alert("data saved: " + error);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("error " + errorThrown);
}
});
alert("end mydata function");
}
}); // end document.ready
//-->
</script>
</head>
<body>
<button type="button" id="test" >Add New</button>
</body>
</html>
PHP
<?php
$myVar = $_POST['name'];
$return['nameMsg'] = "thanks $myVar";
$myVar = $_POST['location'];
$return['locationMsg'] = "from $myVar";
$return['error'] = false;
echo json_encode($return);
?>
I am getting all of my javascript alerts except for those inside the ajax statement (neither success or error). It is almost like my script is skipping over tha开发者_高级运维t one statement. I am not sure what I am missing here but I have spent a couple of hours trying to figure it out. Any help you could offer would be greatly appreciated.
My vote is that your variables inside the success callback are undefined, so the method doesn't compile or execute.
alert("Data saved: " + nameMsg);
alert("Data saved: " + locationMsg);
alert("data saved: " + error);
nameMsg, locationMsg, and error don't appear to be defined anywhere. This seems to masquerade as a method not getting executed sometimes, but Firebug or Chrome's developer tools should show you the error.
Does your success callback get executed if you don't try to use them? Just do an
alert("foo");
and see if that works.
Are you hitting this from www.mypage.com? If you're not, the XHR will just get eaten, with no return (error or success).
Also, you have a typo... the 'type' should be lower-cased, but that shouldn't cause your issue.
It should be
$.ajax({
type: "POST",
....
});
Use something like Firebug to inspect your JS for errors.
You also need to make sure that you're calling this from the same domain.
There is also the possibility your php script may be throwing a "notice" into the output, due to variable $return not being initialized, thereby not returning valid JSON
try
$return = array();
before using it
This is what you want ? Just copy and paste this onto your html file and change the links..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
// events
$("#test").click(function(){
var myData;
myData = makeDataVar();
sendData(myData);
});
// functions
function makeDataVar(){
return "name=joe&location=bostin";
}
function sendData(myData){
alert("start mydata function");
$.ajax({
type: "POST",
url: "http://www.mypage.com/submitMe.php",
dataType : "json",
data: myData,
success: function (msg) {
//function returns json object not variables
alert("Data saved: " + msg.nameMsg);
alert("Data saved: " + msg.locationMsg);
alert("data saved: " + msg.error);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("error " + errorThrown);
}
});
alert("end mydata function");
}
}); // end document.ready
//-->
</script>
</head>
<body>
<button type="button" id="test" >Add New</button>
</body>
</html>
加载中,请稍侯......
精彩评论