入门级问题,AJAX怎么提交表单FORM?

辧聪 2013-11-14 03:10:22
之前的FORM submit提交,速度比较慢,现在想要用局部刷新,也就是ajax,原来的网页改怎么改呢.查了下资料
submit将跳转整个页面,我只要刷新FORM里面某些数据.我是新手,给个纯ajax的就好了,什么框架真心没精力去琢磨.....谢谢了






<html>
<head><title>TEST
</title>
<style type="text/css">
body {font-size:100%}
input{font-size:105%}
select{font-size:105%}
#log_out
{
position:absolute;
color:black;
font-size:15px;
top:15px;
left:1090px;
}
a{text-decoration:none}
</style>
</head>

<body onLoad="SetFormDefaults()">
<h2 style="text-align:center">TEST</h2>

<script type='text/javascript' language='JavaScript'>
//<!--#Form3-->
</script>

<form method="get" action="iocontrol3.cgi" name="iocontrol3">
<table border="1">
<b><font size="5"> Form3 Control</font>
<tr>
<td>PORT1<br>
<select name="port1" >
<option value="0">OFF
<option value="1">ON
</select>
</td>

<td>PORT2<br>
<select name="port2">
<option value="0">OFF
<option value="1">ON
</select>
</td>
<td>PORT3<br>
<select name="port3">
<option value="0">OFF
<option value="1">ON
</select>
</td>
<td><br>
<input type="submit" name=WM value="submit">
</td>
</tr>
</table>
<br>
</form>

<script type="text/javascript">
function SetFormDefaults()
{
document.iocontrol3.port1.selectedIndex=dport1;
document.iocontrol3.port2.selectedIndex=dport2;
document.iocontrol3.port3.selectedIndex=dport3;
</script>

</html>
...全文
11425 7 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
别闹腰不好 2013-11-14
  • 打赏
  • 举报
回复
jquery中form 插件。
sliwey 2013-11-14
  • 打赏
  • 举报
回复
jquery只要下载个js文件 然后引入就好了
<script src="<%=request.getContextPath()%>/js/jquery-1.7.2.min.js"></script>
未知数 2013-11-14
  • 打赏
  • 举报
回复
作为新手你还是用框架的ajax函数好,原生的更麻烦 楼上的就不错,只需引入jQuery的js文件即可
辧聪 2013-11-14
  • 打赏
  • 举报
回复
引用 3 楼 u011559804 的回复:
我一般用jquery的ajax方法 表单提交用 data:$("#form1").serialize(), form1为你要提交表单的id

$("#subbtn").click(function(){
         	$.ajax({
         		type: "post",
         		url: "consultant_save.action",     
         		data: $("#form1").serialize(),    
         		success: function(data) {
         			alert("提交成功!");
         		},
         		error: function(data) {
         			alert(data);
         		}
         	})
         });
是不是还要jquery的插件,这样的话对我拿督太大,AJAX能直接用吗?
sliwey 2013-11-14
  • 打赏
  • 举报
回复
我一般用jquery的ajax方法 表单提交用 data:$("#form1").serialize(), form1为你要提交表单的id

$("#subbtn").click(function(){
         	$.ajax({
         		type: "post",
         		url: "consultant_save.action",     
         		data: $("#form1").serialize(),    
         		success: function(data) {
         			alert("提交成功!");
         		},
         		error: function(data) {
         			alert(data);
         		}
         	})
         });
辧聪 2013-11-14
  • 打赏
  • 举报
回复
这个代码有什么错误码?
辧聪 2013-11-14
  • 打赏
  • 举报
回复
<!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"> <html> <head><title>TEST </title> <style type="text/css"> body {font-size:100%} input{font-size:105%} select{font-size:105%} #log_out { position:absolute; color:black; font-size:15px; top:15px; left:1090px; } a{text-decoration:none} </style> <body onLoad="SetFormDefaults()"> <h2 style="text-align:center">TEST</h2> <script type="text/javascript"> function SetFormDefaults() { document.iocontrol3.port1.selectedIndex=dport1; document.iocontrol3.port2.selectedIndex=dport2; document.iocontrol3.port3.selectedIndex=dport3; } </script> </script> <script type="text/javascript"> function loadXMLDoc() { xmlhttp=null; if (window.XMLHttpRequest) {// code for Firefox, Mozilla, IE7, etc. xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp!=null) { xmlhttp.onreadystatechange=state_Change; xmlhttp.open("GET","iocontrol3.cgi",true); xmlhttp.send(null); setTimeout("loadXMLDoc()",1000); } else { alert("Your browser does not support XMLHTTP."); } } function state_Change() { if (xmlhttp.readyState==4) {// 4 = "loaded" if (xmlhttp.status==200) {// 200 = "OK" str = xmlhttp.responseText; canshu = str.split(";"); document.getElementById('port1').innerHTML=canshu; document.getElementById('port2').innerHTML=canshu; document.getElementById('port3').innerHTML=canshu; } else { alert("Problem retrieving data:" + xmlhttp.statusText); } } } } </script> </head> <body> <script type='text/javascript' language='JavaScript'> //<!--#Form3--> </script> <form method="get" action="iocontrol3.cgi" name="iocontrol3"> <table border="1"> <b><font size="5"> Form3 Control</font> <tr> <td>PORT1<br> <select name="port1" > <option value="0">OFF <option value="1">ON </select> </td> <td>PORT2<br> <select name="port2"> <option value="0">OFF <option value="1">ON </select> </td> <td>PORT3<br> <select name="port3"> <option value="0">OFF <option value="1">ON </select> </td> <td><br> <input type="button" onclick="loadXMLDoc()" name=WM value="submit"> </td> </tr> </table> <br> </form> </body> </html>

52,792

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧