无法使用ajax向php传递值
Unable to pass value using ajax to php
我对ajax完全陌生。我想将html表单值传递给php然后将php页面的输出返回到html页面
Ajax代码
$("#submit1").click(function(){
var formData = $("#add-cart-form").serialize();
$.ajax({
type: 'POST',
url: 'test.php',
dataType : 'json',
data: {
'total_load' : $('#total_load').val(),
'hours' : $('#hours').val(),
},
success: function (data) {
alert(data)
},
});
var result = $.parseJSON(output);
alert(result[0]);
});
相关php代码
$connected_load = $_POST['total_load']; $no_of_hours = $_POST['hours'];
echo json_encode(array(
$connected_load,
$selected_inverter["model"],
$selected_inverter["voltage"],
$selected_inverter["type"],
$no_of_hours,$selected_battery));
恕我直言,代码有一些不准确之处。首先,你在写:
var formData = $("#add-cart-form").serialize();
…但您不是通过$.ajax发送formData
。相反,您将发送其他post数据,特别是
{ 'total_load' : $('#total_load').val(), 'hours' : $('#hours').val(),}
…对象内部有一个错误,右花括号前有一个逗号
无论如何,这是正确的做法(js)
$("#submit1").click(function(event){
// perhaps formData form embrace "total_load" and "hours" ?
var formData = $("#add-cart-form").serialize();
$.ajax({
url: 'test.php',
cache: false, // optional
async: true, // optional, defaults to true. False value will make ajax synchronous, hanging the browser.
data: formData,
type: 'post',
dataType : 'json'
}).done(function(d){ // trying to simplify comprehension of the console.log output, below...
console.log(d.d_connected_load);
console.log(d.d_model);
console.log(d.d_voltage);
console.log(d.d_type);
console.log(d.d_no_of_hours);
console.log(d.d_selected_battery);
}).fail(function(j,s,e){
console.warn(j.responseText);
});
});
和,PHP端:
<?php
$connected_load = $_POST['total_load'];
$no_of_hours = $_POST['hours'];
# stuffs here for sanitizing $_POST and working on $selected_inverter["model"], $selected_inverter["voltage"], $selected_inverter["type"], $selected_battery
echo json_encode(
array(
"d_connected_load" => $connected_load,
"d_model" => $selected_inverter["model"],
"d_voltage" => $selected_inverter["voltage"],
"d_type" => $selected_inverter["type"],
"d_no_of_hours" => $no_of_hours,
"d_selected_battery" => $selected_battery
)
);
不需要解析JSON。当你在ajaxcall选项中指定dataType:'json'
进行ajax调用时,jQuery会为你做这件事(显然,从php返回的json必须是格式良好的)。
.done()
和.fail()
承诺方法来代替success
和fail
。-> http://api.jquery.com/jquery.ajax/UPDATE: STEP BY STEP示例:
我尽量让它更容易理解。最初的步骤:- 创建一个名为form.php的文件; 创建一个ajax_test.php文件;创建test.js文件
…
====== FILE FORM.PHP ======
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<form id="add-cart-form" method="post">
<p>TOTAL LOAD: <input type="text" value="total load" name="total_load" /></p>
<p>TOTAL LOAD: <input type="text" value="hours!" name="hours" /></p>
<hr />
<button type="submit" id="submit1">SUBMIT</button>
</form>
</body>
<script type="text/javascript" src="js/test.js"></script>
</html>
====== FILE AJAX_TEST.PHP ======
<?php
$connected_load = $_POST['total_load'];
$no_of_hours = $_POST['hours'];
# stuffs here for sanitizing $_POST and working on $selected_inverter["model"], $selected_inverter["voltage"], $selected_inverter["type"], $selected_battery
echo json_encode(
array(
"d_connected_load" => $connected_load,
"d_model" => $selected_inverter["model"],
"d_voltage" => $selected_inverter["voltage"],
"d_type" => $selected_inverter["type"],
"d_no_of_hours" => $no_of_hours,
"d_selected_battery" => $selected_battery
)
);
====== FILE TEST.JS ======
$("#submit1").click(function(event){
// perhaps formData form embrace "total_load" and "hours" ?
var formData = $("#add-cart-form").serialize();
$.ajax({
url: 'ajax_test.php',
cache: false, // optional
async: true, // optional, defaults to true. False value will make ajax synchronous, hanging the browser.
data: formData,
type: 'post',
dataType : 'json'
}).done(function(d){ // trying to simplify comprehension of the console.log output, below...
console.log(d.d_connected_load);
console.log(d.d_model);
console.log(d.d_voltage);
console.log(d.d_type);
console.log(d.d_no_of_hours);
console.log(d.d_selected_battery);
}).fail(function(j,s,e){
console.warn(j.responseText);
});
event.preventDefault();
event.stopImmediatePropagation();
return false;
});
此时还没有定义output
变量。尝试解析回调成功函数中的响应:
success: function (data) {
var result = $.parseJSON(data);
console.log(result[0]);
}
相关文章:
- PHP AJAX图片上传示例不上传
- PHP/Ajax/jquery/JON-在Ajax Post之后将echo文本中的一部分作为变量返回
- 不确定我在PHP AJAX中使用的是什么开发模式
- Php ajax return json or html
- PHP Ajax 表单提交 .什么也没发生
- 如何在发送时不打开新页面的情况下使用php/ajax发送表单
- 通过post-php-ajax发送
- 如何使用php-ajax将值从mysqldb获取到dropdownbox
- 使用JavaScript的PHP-Ajax调用将值存储在DB中
- php ajax within ajax
- PHP-AJAX复选框过滤器使用数据标记属性
- 如何在jquery中对php/ajax传递的数组进行切片
- 使用 javascript/jquery/any 动态创建 html 页面客户端.如果不可能,如何使用 php/ajax
- 为什么我的保存时间功能不起作用?PHP + AJAX JS.
- 如何在不使用 PHP/AJAX 重新加载网页的情况下自动更新内容
- JQUERY + PHP + AJAX 不起作用
- JavaScript 重置 PHP/AJAX 中的填充字段
- 数据库更新的用户确认 - php + Ajax
- PHP Ajax 自动完成多个字段
- Autosuggestion Javascript/PHP/AJAX Code