在jQuery中通过AJAX发送表单,然后保存在MySQL中,但不工作
send form via AJAX in jQuery then save in MySQL but doesn't work
作为标题,我是一个关于网站设计的初学者。如果我问一个愚蠢的问题,请不要介意。当我发送表单时,它没有工作。
这里是html:
<form id="form1" name="form1" action="toSQL.php" method="POST" accept-charset="utf-8">
<input type="text" name="Cliname" id="textfield" maxlength = "10" />
<textarea name="message" id="message" rows="3" maxlength = "20" ></textarea>
<input type="submit" value="submit" id="submit" />
</form>
<div class="alert"></div>
,这里是js:
<script type="text/javascript">
$(document).ready(function() {
var form = $(this) ;
var submited = $('#submit') ;
var alerted = $('.alert') ;
form.on( 'submit', this, (function(event) {
event.preventDefault();
if ( $.trim($form.find('input[name="Cliname"]').val()) == "" || $.trim($form.find('input[name="message"]').val()) == "" ) {
alert( "please enter!!" ) ;
return ;
}
else {
$.ajax({
url: 'toSQL.php', // form action url
type: 'POST', // form submit method get/post
dataType: 'html', // request type html/json/xml
data: form.serialize(), // serialize form data
beforeSend: function() {
alerted.fadeOut();
},
success: function(data) {
alerted.html(data).fadeIn(); // fade in response data
form.trigger('reset'); // reset form
},
error: function(e) {
console.log(e)
}
});
}
}));
});
</script>
服务器端php:
<?php
if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) ){
if (isset($_POST['Cliname']) AND isset($_POST['message'])) {
$name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
$message = filter_var($_POST['message'], FILTER_SANITIZE_STRING);
if (send($name, $message)) {
echo 'Message sent!';
} else {
echo 'Message couldn''t sent!';
}
}
else {
echo 'All Fields are required';
}
return;
}
function send( $name, $message ) {
$time = date("Y-m-d H:i:s");
$mysqlConnection=mysql_connect("localhost", 'root', '') or die("connect error!");
mysql_select_db('test') or die ("db error!");
$queryStr="INSERT INTO fortest (time, message, name)
VALUES ( '$time', '$message', '$name')";
mysql_query($queryStr,$mysqlConnection) or die(mysql_error());
return true ;
}
?>
这里是我参考的网站:http://www.w3bees.com/2013/08/submit-form-without-page-refresh-with.html我错过什么了吗?
正如几个人已经提到的,您试图序列化整个dom对象,这是行不通的。把它改成var form = $("#form1"),就可以了。
我建议你在chrome开发工具中打开网页,单击网络选项卡,单击保存日志,然后提交表单。提交后,您将看到发送到服务器的完整报头,并可以验证它是否正常工作,以帮助缩小问题范围
相关文章:
- 在变量中保存值的最佳方法是在应用程序关闭后使用,然后使用apachecordova在android中重新启动
- Angular js,在选择元素上,我想 POST 数据以将其保存在数据库中,然后我想使用 PUT 更新它而无需重新加载
- 将图像输出到浏览器,然后再将其保存到文件夹
- firefox扩展可以修改HTML文档的DOM,然后保存为HTML
- 在表中创建带有输入的新行,然后单击保存该输入的值
- Metor:将html保存为字符串,然后将其转换为DOM节点
- 如何将文本输入保存为变量,然后提交到服务器(ajax 和 javascript)
- 如何将数据保存在一个 HTML 页面中,然后在 Phonegap 中的另一个 HTML 页面上显示
- 从“选项”弹出窗口中选择一个值,然后将其保存到 Chrome.storage,以便在后台脚本中用作值
- 记录链接单击,然后保存到本地存储
- 创建一个带有背景图像的画布,动态更新文本,然后保存画布
- 将规则添加到CSS类,然后保存样式表
- 如何将表单中的 Json 发布到控制器,然后保存到数据库
- XML格式的HTML,然后保存为文件
- 索引目录,然后保存到变量?node . js
- 从JSON取回,编辑模型数据,然后保存回JSON
- JS调整图像大小,然后保存调整大小的图像
- JQGrid一次更新多行,然后保存
- Javascript Croppie.从客户端url裁剪图像,然后保存
- 我怎么能看到一个预览上传的图像(don!),然后保存它的地址