[英]AJAX call to a PHP file not working
I am practicing doing simple AJAX calls to localhost but experiencing trouble. 我正在练习对本地主机执行简单的AJAX调用,但是遇到了麻烦。 What I'm trying to do is send two textbox form values to PHP and then have it return a message to an empty div in my form upon successful reception via AJAX.
我想做的是将两个文本框表单值发送到PHP,然后在通过AJAX成功接收后让它在我的表单中将消息返回到空div。 My test.php is like this:
我的test.php是这样的:
<?php
$num = htmlentities(substr($_POST["num"], 0, 7), ENT_QUOTES);
$name = htmlentities(substr($_POST["name"], 0, 50), ENT_QUOTES);
$result = "'$num ' + 'and' + ' $name' + ' values have been successfully AJAXd'";
echo json_encode($result);
jQuery: jQuery的:
$("#form").submit(function() {
event.preventDefault();
$("#msgcontainer").html("");
$.ajax({
url: "test.php",
data: ("#num").serialize(), ("#name").serialize(),
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json"
success: function(response) {
$("#msgcontainer").html(response);
}
});
}
When I try to submit, the page simply reloads and adds form values to the URL. 当我尝试提交时,页面只是重新加载并将表单值添加到URL。 I've been trying to solve this for about a day now, so any help would be greatly appreciated.
我已经尝试解决这一问题了大约一天,因此我们将不胜感激。
EDIT: 编辑:
I figured it out by trying things from every response. 我通过尝试每个响应中的内容来弄清楚。 Not sure why it works without serialization... If someone knows, please explain.
不知道为什么不序列化就可以工作...如果有人知道,请解释。 Working jQuery code:
有效的jQuery代码:
$("#form").submit(function(event) {
event.preventDefault();
$("#msgcontainer").html("");
$.ajax({
url: "test.php",
data: {
num: $("#num").val(),
name: $("#name").val()
},
type: "POST",
dataType: "json",
success: function(response) {
$("#msgcontainer").html(response);
}
});
});
Thank you for the help! 感谢您的帮助!
Two things stand out immediately: 立即有两件事脱颖而出:
data: ("#num").serialize(), ("#name").serialize(),
contentType: "application/json; charset=utf-8",
The first should be this (assuming you have two text boxes): 第一个应该是这样(假设您有两个文本框):
data: {
num: $('#num').val(),
name: $('#name').val()
},
And the contentType:
line should not be there, otherwise you'll have an empty $_POST
. 而且
contentType:
行不应存在,否则您将有一个空的$_POST
。
Lastly, event
should be a function argument, ie: 最后,
event
应该是一个函数参数,即:
$("#form").submit(function(event) {
event.preventDefault();
// ...
您的AJAX调用中的数据参数有误,应为:
data: { num: $('#num').val() , name: $('#name').val() }
$("#form").submit(function() {
event.preventDefault();
event
isn't defined anywhere. event
未在任何地方定义。 I'm guessing you meant ...submit(function(event) {
. 我猜你的意思是
...submit(function(event) {
。
You should be seeing an error in the JavaScript console telling you "event is not defined" or "TypeError: Cannot read property 'preventDefault' of undefined." 您应该在JavaScript控制台中看到一个错误,告诉您“未定义事件”或“ TypeError:无法读取未定义的属性'preventDefault'”。
The data is not being sent properly. 数据发送不正确。 Consider replacing:
考虑更换:
data: ("#num").serialize(), ("#name").serialize(),
With: 带有:
data: $(this).serialize(),
And then you may want to edit your PHP
script so that you concatenate
the strings instead of summing
them. 然后,您可能需要编辑
PHP
脚本,以便将字符串concatenate
而不是summing
。
Also pass the event
param or simply use the following: 还可以传递
event
参数或直接使用以下内容:
$("#form").submit(function() {
var event = arguments[0];
event.preventDefault();
....
});
I doubt that you need contentType: "application/json; charset=utf-8",
! 我怀疑您是否需要
contentType: "application/json; charset=utf-8",
good morning, 早上好,
You have to serialize the entire form, like: 您必须序列化整个表格,例如:
$("#yourform").serialize();
Instead of just field by field: 而不只是逐个字段:
("#num").serialize(), ("#name").serialize()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.