Ajax提交的两种方式：
一是url参数提交数据，
二是form提交（和平常一样在后台可以获取到Form表单的值）。在所要提交的表单中，如果元素很多的话建议用第二种方式进行提交
一.Url参数提交数据
<script type="text/javascript"> function checkCorpID()//检测客户编号是否可用 { if($.trim($("#txtF_CORPID")[0].value)=="")//txtF_CORPID是客户编号输入框 { alert("请输入客户编号!"); } else { $("#checkFlag").html("正在检测");//显示提示信息 $.ajax({ type: "POST", //提交方式（一般选择post提交，安全）url: "CheckCorpID.ashx", data: "ID="+$.trim($("#txtF_CORPID")[0].value),//提交表单，相当于CheckCorpID.ashx?ID=XXX success: function(msg){$("#checkFlag").html("");alert( msg ); } //操作成功后的操作！msg是后台传过来的值 }); } } </script>
二.form表单提交
<script type ="text/javascript" src ="../js/jquery.js"></script> //必须要引用 <script type ="text/javascript" src ="../js/jquery.form.js"></script> //必须要引用 <script type="text/javascript"> // wait for the DOM to be loaded $(document).ready(function() //ready在文档加载后激活函数{ $('#Tip').hide();//显示操作提示的元素不可见 $('#form1').submit(function()//提交表单 { //alert("ddd"); var options = { target:'#Tip', //后台将把传递过来的值赋给该元素 url:'ReturnVisit.aspx?flag=do', //提交给哪个执行 type:'POST', success: function(){ alert($('#Tip').text());} //显示操作提示 }; $('#form1').ajaxSubmit(options); return false; //为了不刷新页面,返回false，反正都已经在后台执行完了，没事！ }); } ); </script> <body> <form id="form1" runat="server"> <div> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" class="tableCategory">客户回访</td> </tr> <tr> <td width="30%" class="tableBg1">客户名称：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_CorpName" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1">回访主题：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_ReturnVisitTitle" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1">联系人：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_ContractPerson" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1">联系人职务：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_ContractPersonPosition" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1">联系电话：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_ContractPhone" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1">回访时间：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_ReturnVisitDate" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1">回访内容：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_ReturnVisitContent" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1">回访相关文档：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_ReturnVisitFile" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1"> </td> <td class="tableBg2"> <asp:Button ID="Submit_BT" runat="server" Text="确定" CssClass="button" /> <input type="reset" class="button" value="还原" /> </td> </tr> </table> <span id="Tip"></span> </div> </form> </body>
<button type="submit">保存</button></div></form>
三.提交验证
HTML表单代码段：
<span id="ss" style="color: red;font-size: 12px;"></span>
<form action="dw/addDw" method="post" οnsubmit="return submitCheck()">
<table class="rttable"><tr><td class="tdbg">单位名称</td><td class="tdinput"><input type="text" name="dwmc" id="dwmc" required="required" value="${tbDw.dwmc }" class="form-control" /></td><button type="submit">保存</button></div></form>
javascript验证代码：
function submitCheck(){var s1 = $("#ss").html();if(s1.length > 0 ){if(s1.length > 0){alert(s1);} return false;} else {return true;}}
$("#dwmc").blur(function() {var cyxmpzmc = $("#dwmc").val();var cyxmpzmcStr = encodeURI(encodeURI(cyxmpzmc));$.post("dw/dwmccfyz?cyxmpzmc="+cyxmpzmcStr, function(data){if("1"==data) {alert("单位名称已存在，请重新录入！");$("#ss").text("单位名称已存在");} else{$("#ss").text("");}});});
效果展示：
javascript：知识点： $("#dwmc").blur(function() {//blur焦点 var cyxmpzmc = $("#dwmc").val(); //val取值 <span id="ss" style="color: red;font-size: 12px;"></span> $("#ss").text("单位名称已存在"); //html改标签里的内容
