使用JQUERY的PHP AJAX回发
再一次提醒我，我现在真的进入了php，我只需要先知道一些事情。首先，我尝试在不重新加载客户机页面的情况下，向服务器上的服务器进行回发。下面是我想做的一个例子：我必须使用文本框，现在当用户在两个文本框中输入一个数字并单击add按钮时，总值应该计算并显示在第三个文本框中，而无需重新加载页面。我读了一些关于ajax的内容，但我在实现它时遇到了问题使用JQUERY的PHP AJAX回发,php,jquery,Php,Jquery,再一次提醒我，我现在真的进入了php，我只需要先知道一些事情。首先，我尝试在不重新加载客户机页面的情况下，向服务器上的服务器进行回发。下面是我想做的一个例子：我必须使用文本框，现在当用户在两个文本框中输入一个数字并单击add按钮时，总值应该计算并显示在第三个文本框中，而无需重新加载页面。我读了一些关于ajax的内容，但我在实现它时遇到了问题 <?php if (isset($_POST["add"])) { $val1 = $_POST["val1"];
<?php
if (isset($_POST["add"]))
{
$val1 = $_POST["val1"];
$val2 = $_POST["val2"];
$result = $val1 + $val2;
}
?>
<html>
<head>
<title></title>
<script src="jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
if ($("#btn").click)
{
var request = $.ajax({
url: "postback.php",
type: "POST",
data: {
val1 : "what goes here?",
val2 : "what goes here?"
}
});
request.done(function(msg) {
$("#log").html( msg );
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
});
</script>
</head>
<body>
<input type="input" name="val1">
<input type="input" name="val2">
<input type="input" name="result" value="<?php echo $result ?>">
<input type="submit" id="btn" name="add">
</body>
</html>
$（文档）.ready（函数（）{
如果（$（“#btn”）。单击）
{
var请求=$.ajax({
url:“postback.php”，
类型：“POST”，
数据：{
瓦尔1：“这里有什么？”，
瓦尔2：“这里有什么？”
}
});
request.done（函数（msg）{
$（“#log”）.html（msg）；
});
请求失败（函数（jqXHR，textStatus）{
警报（“请求失败：+textStatus”）；
});
}
});
您需要返回的结果
$result = $val1 + $val2;
使用
您需要返回的结果
$result = $val1 + $val2;
使用
不要混合使用JavaScript和PHP逻辑。把它们分开
您需要将jQuery发布到另一个文件中，并在该文件中回显PHP的结果
然后，这个结果将被放入.done（）
方法中（尽管我会使用.success（）
，您可以使用jQuery/JavaScript更新HTML的内容）
到此为止，您的HTML/JS文件中应该没有任何PHP
test.PHP中的PHP代码
从这里，我们可以看到您需要发布一个val1和一个val2，所以这里是一个非常基本的脚本
if (isset($_POST))
{
$val1 = isset($_POST["val1"]) ? $_POST["val1"] : 'No value 1 passed through';
$val2 = isset($_POST["val2"]) ? $_POST["val2"] : 'No value 2 passed through';
if (is_int($val1) && is_int($val2))
{
// They're integers, add them
$result = $val1 + $val2;
}
else
{
// They're strings, append them
$result = $val1 . $val2;
}
echo $result;
}
这就是PHP中所需的全部内容
你的HTML/JS
$（document.ready（function（））{
$（“#添加”）。单击（函数（e）{
e、 预防默认值（）；
$.ajax({
url:'test.php'，
键入：“POST”，
数据：{
‘val1’：$（“#val1”）.val（），
‘val2’：$（“#val2”）.val（）
},
成功：功能（数据、状态）{
$（“#结果”）.html（数据）
}
});
});
});
结果应该出现在这里
就是这样。非常简单。注意，未经测试，请尝试一下。不要将JavaScript和PHP逻辑混合在一起。将它们分开
您需要将jQuery发布到另一个文件中，并在该文件中回显PHP的结果
然后，这个结果将被放入.done（）
方法中（尽管我会使用.success（）
，您可以使用jQuery/JavaScript更新HTML的内容）
到此为止，您的HTML/JS文件中应该没有任何PHP
test.PHP中的PHP代码
从这里，我们可以看到您需要发布一个val1和一个val2，所以这里是一个非常基本的脚本
if (isset($_POST))
{
$val1 = isset($_POST["val1"]) ? $_POST["val1"] : 'No value 1 passed through';
$val2 = isset($_POST["val2"]) ? $_POST["val2"] : 'No value 2 passed through';
if (is_int($val1) && is_int($val2))
{
// They're integers, add them
$result = $val1 + $val2;
}
else
{
// They're strings, append them
$result = $val1 . $val2;
}
echo $result;
}
这就是PHP中所需的全部内容
你的HTML/JS
$（document.ready（function（））{
$（“#添加”）。单击（函数（e）{
e、 预防默认值（）；
$.ajax({
url:'test.php'，
键入：“POST”，
数据：{
‘val1’：$（“#val1”）.val（），
‘val2’：$（“#val2”）.val（）
},
成功：功能（数据、状态）{
$（“#结果”）.html（数据）
}
});
});
});
结果应该出现在这里
就是这样。非常简单。请注意，未经测试，请尝试一下。如果不想将JS和PHP分开，请遵循以下步骤：
1.您应该将输入类型设置为按钮
2.您还应该在ajax调用中发布添加
3.您应该从textboxs$（'#val1'）.val（）获取值。
4.您应该在回显两个值后停止代码，因为如果不这样做，ajax将返回其余的html代码和页面内容。
5.最后，您应该通过JavaScript而不是php将新值添加到第三个输入中，因为它是ajax，页面不会重新加载。
试试这个：
<?php
if(isset($_POST["add"])){
$val1 = $_POST["val1"];
$val2 = $_POST["val2"];
$result = $val1+$val2;
echo $result;
die();
}
?>
<html>
<head>
<title></title>
<script src="jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function(){
var request = $.ajax({
url: "postback.php",
type: "POST",
data: {
val1 : $('#val1').val(),
val2 : $('#val2').val(),
add : "ok"
}
});
request.done(function(msg) {
console.log(msg);
$("#result").val( msg );
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
</head>
<body>
<input type="input" id="val1">
<input type="input" id="val2">
<input type="input" id="result" value="">
<input type="button" id="btn" name="add">
</body>
</html>
$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
var请求=$.ajax({
url:“postback.php”，
类型：“POST”，
数据：{
val1:$（'#val1'）.val（），
val2:$（'#val2'）.val（），
加上：“好的”
}
});
request.done（函数（msg）{
控制台日志（msg）；
$（“#结果”）.val（味精）；
});
请求失败（函数（jqXHR，textStatus）{
警报（“请求失败：+textStatus”）；
});
});
});
如果不想分离JS和PHP，请遵循以下步骤：
1.您应该将输入类型设置为按钮
2.您还应该在ajax调用中发布添加
3.您应该从textboxs$（'#val1'）.val（）获取值。
4.您应该在回显两个值后停止代码，因为如果不这样做，ajax将返回其余的html代码和页面内容。
5.最后，您应该通过JavaScript而不是php将新值添加到第三个输入中，因为它是ajax，页面不会重新加载。
试试这个：
<?php
if(isset($_POST["add"])){
$val1 = $_POST["val1"];
$val2 = $_POST["val2"];
$result = $val1+$val2;
echo $result;
die();
}
?>
<html>
<head>
<title></title>
<script src="jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function(){
var request = $.ajax({
url: "postback.php",
type: "POST",
data: {
val1 : $('#val1').val(),
val2 : $('#val2').val(),
add : "ok"
}
});
request.done(function(msg) {
console.log(msg);
$("#result").val( msg );
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
</head>
<body>
<input type="input" id="val1">
<input type="input" id="val2">
<input type="input" id="result" value="">
<input type="button" id="btn" name="add">
</body>
</html>
$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
var请求=$.ajax({
url:“postback.php”，
类型：“POST”，
数据：{
val1:$（'#val1'）.val（），
val2:$（'#val2'）.val（），
加上：“好的”
}
});
request.done（函数（msg）{
控制台日志（msg）；
$（“#结果”）。