ajax提交form表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>send string</title>
<script language=javascript>
var xmlhttp;
function createxmlhttprequest(){
if(window.ActiveXObject) {
xmlhttp=new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 5') != -1) ?
'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
}
}
function sendstring(){
for(var i=0;i<2;i++){
createxmlhttprequest();
xmlhttp.onreadystatechange=statechange;
xmlhttp.open('POST','ajax.aspx',false);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(getFormQueryString("ff"));
}
}
function statechange(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("x").innerHTML=xmlhttp.responseText;
}
}
function Button1_onclick() {
sendstring();
}
//得到一个表单里的全部信息
function getFormQueryString(frmID){
var frmID=document.getElementById(frmID);
var i,queryString = "", and = "";
var item; // for each form's object
var itemValue;// store each form object's value
for( i=0;i<frmID.length;i++ ) {
item = frmID[i];// get form's each object
if ( item.name!='' ) {
if ( item.type == 'select-one' ) {
itemValue = item.options[item.selectedIndex].value;
}else if ( item.type=='checkbox' || item.type=='radio') {
if ( item.checked == false ){
continue;
}
itemValue = item.value;
}else if ( item.type == 'button' || item.type == 'submit' || item.type == 'reset' || item.type == 'image'){ // ignore this type
continue;
}else {
itemValue = item.value;
}
itemValue = encodeURIComponent(itemValue);
queryString += and + item.name + '=' + itemValue;
and="&";
}
}
return queryString;
}
</script>
</head>
<body >
<form id=ff name=ff>
<input type=text id="tbx" name="tbx" />
<input id="Button1" type="button" value="button" language="javascript"
onclick="return Button1_onclick()" /><br />
<br />
<br />
<div id=x></div>
asdf<input id="Checkbox1" name="weew" type="checkbox" />
<input id="Radio1" name="sdfsdf" type="radio" />
<input id="Radio2" checked="checked" name="fff" type="radio" />
<textarea id="TextArea1" cols="20" name="wr2234" rows="2"></textarea>
<select id="Select1" name="fff">
<option selected="selected" value="1">dsf</option>
<option value="2">214312</option>
<option value="3">23421</option>
</select>
</form>
</body>
</html>
Ajax如何无刷新提交form里面的内容,而不是一个值一个值的提交
function httpPostForm(frmID, URL, data, contentType) {
//alert(URL);
URL += ('?' + getFormQueryString(frmID));
//alert(URL);
this.init(URL,data,contentType);
return trim(this.httpObj.responseText);
}
function getFormQueryString( frmID ){
var i,queryString = "", and = "";
var item; // for each form's object
var itemValue;// store each form object's value
for( i=0;i<frmID.length;i++ ){
item = frmID[i];// get form's each object
if ( item.name!='' ){
if ( item.type == 'select-one' ){
itemValue = item.options[item.selectedIndex].value;
}else if ( item.type=='checkbox' || item.type=='radio'){
itemValue = item.value;
}else if ( item.type == 'button' || item.type == 'submit' ||tem.type == 'reset' ||
item.type == 'image'){
continue;
}else{
itemValue = item.value;
}
itemValue = encodeURIComponent(itemValue);
queryString += and + item.name + '=' + itemValue;
}
if ( item.checked == false ){
continue;
and="&";
}
}
return queryString;
}
JSP
function doCheckSubmit( actionUrl ){
var ajaxObj = new AjaxObject();
//actionUrl = actionUrl + "?userName=" + document.loginFrm.userName.value;
var res = ajaxObj.httpPostForm(loginFrm,actionUrl);
document.getElementById('checkResultDiv').innerHTML = '<B>' + res + '</B>';
}
相关推荐
本文将详细介绍如何利用AJAX提交表单的完整流程，以实现更加流畅和用户友好的交互体验。 ### 1. 创建HTML表单 首先，我们需要创建一个HTML表单，它包含了用户输入的数据和一个用于触发AJAX提交的按钮。例如： ```...
### 一、前端：使用jQuery的AJAX提交表单 1. **引入jQuery库**：首先确保在HTML文件中引入了jQuery库。可以使用CDN链接或本地文件，例如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js">...
在“ajax提交表单”这个场景中，我们需要关注的是POST请求，因为表单提交通常涉及到向服务器发送数据。以下是使用JavaScript实现的一个简单例子： ```html <!DOCTYPE html> <title>AJAX提交表单示例 请...
在本教程中，我们将深入探讨如何在Vue 1.x和2.x版本中使用Ajax提交表单。 **Vue 1.x 和 Vue 2.x 的核心差异** Vue 2.x 对于Vue 1.x进行了一些关键性的改进，包括优化性能、引入虚拟DOM以及对组件API的调整。然而，...
完整的jq ajax提交表单，奖解压后jq文档加入页面中，调用就可惟了。 表单结构 <form id="myForm" action="comment.php" method="post"> Name: <input type="text" name="name" /> Comment: <...
接下来，我们将深入探讨Asp+Ajax提交表单的实例，以及如何实现这一功能。 首先，我们需要理解Ajax的核心概念。Ajax并非一种编程语言，而是利用JavaScript、XMLHttpRequest对象和DOM（Document Object Model）来实现...
总结来说，本示例的"完成的Ajax提交表单"展示了如何使用Ext JS结合Ajax技术，实现无刷新的表单提交，提高Web应用的响应速度和用户体验。通过理解和实践这些知识点，开发者可以更好地构建交互性更强的Web应用程序。
在“使用jQuery ajax提交表单代码”的资源中，我们可以期待看到一个清晰的示例，展示如何将表单数据发送到服务器，并处理响应。 1. **jQuery的$.ajax()函数** - **基本语法**：`$.ajax({ options });` - **选项...
一、AJAX提交表单基础 1. **异步性**：AJAX的核心是XMLHttpRequest对象，它可以在后台与服务器通信，而不会干扰用户的界面操作。这意味着用户可以继续浏览页面，而数据正在后台处理。 2. **JSON与XML**：虽然最初...
### AJAX提交表单知识点详解 #### 一、概述 在Web开发中，异步JavaScript与XML（Asynchronous JavaScript and XML，简称AJAX）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器...
这是一个ajax提交表单插件，支持文件上传，用起来非常方便。具体使用说明 http://blog.csdn.net/qq122453418/article/details/79511164 欢迎留言
开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加。 在网上看了很多的解决方式,我是用下面这种方法解决的: 1,首先在模板里面加上一个meta : ...
在本文中，我们将通过一个实例来分析如何使用AJAX提交表单数据，并深入探讨其实现原理和技巧。 首先，我们需要注意AJAX请求的两种主要类型：GET和POST。GET请求通常用于从服务器检索数据，而POST请求则通常用于向...
总结来说，Ajax提交URL适用于简单且少量的数据交互，而Ajax提交表单更适合处理包含多个字段的复杂表单数据，能够提供更好的用户体验。在实际应用中，开发者应根据具体需求选择合适的方法，并注意处理可能出现的错误...
本教程将详细讲解如何利用jQuery、jQuery Form插件以及Spring MVC框架来实现Ajax提交表单并上传图片。通过这种方式，用户无需等待页面刷新，即可完成操作，提升了交互性。 首先，`jquery.js` 是jQuery库的核心文件...
本文实例讲述了jQuery使用$.ajax提交表单的方法。分享给大家供大家参考，具体如下： 首先，新建Login.html页面： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
1. **安全性**：使用Ajax提交表单时需要注意安全问题，如CSRF攻击，确保请求是来自合法的来源。 2. **用户体验**：虽然同步请求可以立即得到结果，但会阻塞UI，降低用户体验。推荐使用异步请求。 3. **错误处理**：...
jQuery.form.js是一个form插件，支持ajax表单提交和ajax文件上传.
在这个“Ajax使用jQuery提交表单 文件”中，我们将探讨如何利用jQuery实现Ajax提交表单，从而实现异步数据传输，提高用户体验。 首先，我们需要理解jQuery中的Ajax函数`$.ajax()`。这是一个核心函数，可以进行各种...
其中，使用AJAX实现无刷新数据交互是一个关键技术点，本文将详细介绍ThinkPHP5中如何使用AJAX提交表单，并提供相关的实例分析。 首先，要进行AJAX表单提交，我们通常使用jQuery提供的ajax()方法。这个方法可以让...