提交使用jQuery AJAX的HTML表单 [英] Submitting HTML form using Jquery AJAX
本文介绍了提交使用jQuery AJAX的HTML表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试着去用这个例子中使用AJAX提交HTML： http://jquery.malsup.com/form/
我的HTML code：
＆LT;形式ID =formoid行动=studentFormInsert.php标题=的方法=邮报＆GT;
＆LT; DIV＆GT;＆LT;标签类=头衔＆gt;首先姓名和LT; /标签＆gt;＆LT;输入类型=文本ID =名的名称=名称＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT;标签类=头衔 - GT;名称＆LT; /标签＆gt;＆LT;输入类型=文本ID =名2NAME =名2＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT;输入类型=提交ID =提交按钮名称=提交按钮值=提交＆GT;＆LT; / DIV＆GT;
我的脚本：
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃formoid）。当作ajaxForm（函数（）{
警报（感谢您发表评论！）;
}）;
}）;
＆LT; / SCRIPT＆GT;
这是不工作，我没有收到甚至警告消息 当我提出我不想调用另一个网页，我只是想显示警告信息。
有没有做这件事的一个简单的方法？
PS。我有几个字段，只是把2为例
解决方案
我的code专门为你（在code注释说明）：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆所述;脚本的src =的http：//$c$c.jquery.com/jquery-1.9.1.js＆GT;＆所述; /脚本＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;形式ID =formoid行动=studentFormInsert.php标题=的方法=邮报＆GT;
＆LT; DIV＆GT;
＆LT;标签类=头衔＆gt;首先姓名和LT; /标签＆gt;
＆LT;输入类型=文本ID =名的名称=名称＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT;标签类=头衔 - GT;名称＆LT; /标签＆gt;
＆LT;输入类型=文本ID =名2NAME =名2＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT;输入类型=提交ID =提交按钮名称=提交按钮值=提交＆GT;
＆LT; / DIV＆GT;
＆LT; /形式GT;
＆LT;脚本类型=文/ JavaScript的'＆GT;
/ *附上提交处理程序的形式* /
$（＃formoid）。递交（函数（事件）{
/ *无法正常提交停止形式* /
。事件preventDefault（）;
/ *从页面上的元素得到一些值：* /
变量$形式= $（本），
URL = $ form.attr（行动）;
/ *使用*后的数据发送/
VAR发布= $。员额（URL，{名称：$（'＃姓名）VAL（），名称2：$（'＃名2）VAL（）}）;
/ *警报的结果* /
posting.done（功能（数据）{
警报（成功）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
文档
示例：使用Ajax请求发送表单数据的
$岗位（test.php的，$（＃TESTFORM）序列化（））;
示例：用ajax，并把结果张贴形式的DIV 的
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆所述;脚本的src =的http：//$c$c.jquery.com/jquery-1.9.1.js＆GT;＆所述; /脚本＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;形式的行动=/ID =searchForm＆GT;
＆LT;输入类型=文本名称=S占位符=搜索.../＆GT;
＆LT;输入类型=提交值=搜索/＆GT;
＆LT; /形式GT;
＆LT;！ - 搜索的结果将呈现内该div - ＆GT;
＆LT; DIV ID =结果＆GT;＆LT; / DIV＆GT;
＆LT;脚本＆GT;
/ *附上提交处理程序的形式* /
$（＃searchForm）。递交（函数（事件）{
/ *无法正常提交停止形式* /
。事件preventDefault（）;
/ *从页面上的元素得到一些值：* /
变量$形式= $（本），
长期= $ form.find（'输入[名称=S]）。VAL（）
URL = $ form.attr（行动）;
/ *使用*后的数据发送/
VAR发布= $。员额（URL，{
S：长期
}）;
/ *把结果放到一个div * /
posting.done（功能（数据）{
VAR含量= $（数据）.find（'＃内容）;
。$（＃结果），空（）追加（内容）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
重要提示
在不使用OAuth，请不要使用此方法安全数据（信用卡号码，SSN，任何东西是PCI，HIPAA，或登录相关）
Im trying to submit a HTML from using AJAX by using this example: http://jquery.malsup.com/form/
My html code:
<form id="formoid" action="studentFormInsert.php" title="" method="post">
<div><label class="title">First Name</label><input type="text" id="name" name="name" ></div>
<div><label class="title">Name</label><input type="text" id="name2" name="name2" ></div>
<div><input type="submit" id="submitButton" name="submitButton" value="Submit"></div>
my script:
<script type="text/javascript">
$(document).ready(function() {
$('#formoid').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
this is not working, I'm not getting even the alert message and when I submit i dont want to call another page, I just want to show alert message.
Is there a simple way of doing it?
ps. i have several fields, just put 2 as an example
解决方案
My code specifically for you (described in code comments):
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form id="formoid" action="studentFormInsert.php" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" >
</div>
<div>
<label class="title">Name</label>
<input type="text" id="name2" name="name2" >
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
url = $form.attr( 'action' );
/* Send the data using post */
var posting = $.post( url, { name: $('#name').val(), name2: $('#name2').val() } );
/* Alerts the results */
posting.done(function( data ) {
alert('success');
});
});
</script>
</body>
</html>
Documentation
From jQuery website $.post documentation.
Example: Send form data using ajax requests
$.post("test.php", $("#testform").serialize());
Example: Post a form using ajax and put results in a div
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search..." />
<input type="submit" value="Search" />
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
<script>
/* attach a submit handler to the form */
$("#searchForm").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $(this),
term = $form.find('input[name="s"]').val(),
url = $form.attr('action');
/* Send the data using post */
var posting = $.post(url, {
s: term
});
/* Put the results in a div */
posting.done(function(data) {
var content = $(data).find('#content');
$("#result").empty().append(content);
});
});
</script>
</body>
</html>
Important Note
Without using OAuth please don't use this method for secure data (credit card numbers, SSN, anything that is PCI, HIPAA, or login related)
这篇关于提交使用jQuery AJAX的HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
