{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 孤独总比滥情好 的问题《AJAX request callback using jQuery》','https://www.manongdao.com/q-1984.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am new to the use of jQuery for handling AJAX, and have written a basic script to get the basics down. Currently I am POSTing an AJAX request to the same file, and I wish to do some additional processing based on the results of that AJAX call.
Here is my code:
**/*convertNum.php*/**
$num = $_POST['json'];
if (isset($num))
echo $num['number'] * 2;
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
td {border:none;}
</style>
</head>
<body>
<table width="800" border="1">
<tr>
<td align="center">Number To Send<br /><input type="text" id="numSend" size="40%" style="border:2px solid black;"></td>
<td align="center">Number Returned<br /><input type="text" id="numReturn" size="40%" readonly></td>
</tr>
<tr><td align="center" colspan="4"><input type="button" value="Get Number" id="getNum" /></td></tr>
</table>
<script>
$(document).ready(function () {
$('#getNum').click(function () {
var $numSent = $('#numSend').val();
var json = {"number":$numSent};
$.post("convertNum.php", {"json": json}).done(function (data)
{
alert(data);
}
);
});
});
</script>
</body>
</html>
Here is the response I get if I submit the number '2':
4
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
td {border:none;}
</style>
</head>
<body>
<table width="800" border="1">
<tr>
<td align="center">Number To Send<br /><input type="text" id="numSend" size="40%" style="border:2px solid black;"></td>
<td align="center">Number Returned<br /><input type="text" id="numReturn" size="40%" readonly></td>
</tr>
<tr><td align="center" colspan="4"><input type="button" value="Get Number" id="getNum" /></td></tr>
</table>
<script>
$(document).ready(function () {
$('#getNum').click(function () {
var $numSent = $('#numSend').val();
var json = {"number":$numSent};
$.post("convertNum.php", {"json": json}).done(function (data)
{
alert(data);
}
);
});
});
</script>
</body>
</html>
Obviously I'm only interested in receiving and using the number '4', hence my question: What is the best way to specify exactly what data I want returned?
Some thoughts I've had:
- wrapping all my HTML inside a if statement (i.e., if $num isset, do NOT output html; else output HTML) but then I'm echoing HTML, and I'd rather not do that.
- Setting up a separate PHP script to receive my AJAX call: That was what I did originally, and it works just fine. However, I am interested in keeping everything inside one file, and wanted to explore possible ways of doing so.
I'm sure there is an elegant way to do this. Thanks for any suggestions!
The elegant way would be to have a separate(!) PHP file that will only output the
number times 2part of your current PHP. Then you generate an AJAX request from your current PHP to the new separate PHP.I believe this post answers one aspect of what you are seeing - the echoing of the entire page in your alert box.
Next, here are some good posts for getting the basics of AJAX:
A simple example
More complicated example
Populate dropdown 2 based on selection in dropdown 1
You could add
die();after you echo the number if you really want to keep it on the same page. This will terminate the execution of the script. Don't forget to add brackets around the if statement:It is, however, not the most elegant solution.
I don't know how efficient this is but you can do something like:
NOTE *The better approach is to keep things like this in a separate file, makes it easier to read and easier to understand, especially if you use a good naming conversion.
It is a bad procedural approach but here I go :) :
or better yet:
PS As alternative to
die();you could useexit();, they both do pretty much the same: terminating further execution