ajax提交，form表單提交，onsubmit="return checksubmit()"提交驗證

阿新 • • 發佈：2019-01-15

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" onsubmit="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改標籤裡的內容

轉載：關於ajax，form表單提交，http請求提交的區別

https://www.cnblogs.com/lidgblogs/archive/2017/09/01/7403828.htmlajax模仿form上傳：<!doctype html> <html lang="en"> <head>

表單序列化，jq中的serialize，ajax提交整個form表單，無需逐個拼寫json

</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

ajax提交，form表單提交，onsubmit="return checksubmit()"提交驗證

Ajax提交的兩種方式：一是url引數提交資料，二是form提交（和平常一樣在後臺可以獲取到Form表單的值）。在所要提交的表單中，如果元素很多的話建議用第二種方式進行提交一.Url引數提交資料 <script type="text/javascript"&g

下拉框設定disabled屬性，form表單提交後臺拿不到相應的值

給某個下拉框設定不可選，但是form表單提交以後拿不到該下拉框對應的值$("#type").attr("disabled","disabled")；解決方法：form表單提交之前,jquery將該屬性去掉即可 $("#type").removeAttr("disabled")

如何使用ajax 提交easyUI form表單

func 提示 cli str location 代碼密碼錯誤 logs ons 　　HTML代碼： <form id="Login" method="post"> ... </form> 　　JS代碼如下： $(function(){

jqPaginator分頁（ajax用法和form表單提交用法）

用法 () var meta lang 點擊 parse name back 一般使用方法 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

從http協議，form表單，ajax，httpclient角度解釋Content-Type的設定

百度解釋： Content-Type，內容型別，一般是指網頁中存在的Content-Type，用於定義網路檔案的型別和網頁的編碼，決定檔案接收方將以什麼形式、什麼編碼讀取這個檔案，這就是經常看到一些Asp網頁點選的結果卻是下載到的一個檔案或一張圖片的原因。常見Content-Typ

利用 ajax自定義Form表單的提交方式

需求場景：有時候單純的form表單無法向後端傳遞額外的引數比如需要action傳遞js非同步生成的引數，form表單預設的action就無法滿足需求，這時就需要我們自定義form表單的提交方式。 html:(向後臺傳遞對任務的評論內容，預設缺點：不能攜帶任務id) 1 <

171202之ajax提交整個form表單(一)

簡介： ajax提交form表單在專案中經常用到，前臺無論是簡單的html、jsp或者使用了easyui框架，提交表單都會使用到ajax。總的來說，ajax提交表單可以分為兩種，一種是無返回結果的，就是把表單資料提交給後臺，後臺處理完就完了；另一種就是返回

ajax提交整個form表單

來源：http://blog.csdn.net/tolcf/article/details/41151195 在專案開發中，有時提交form表單時不能只使用action或者jQuery的表單提交方法有三種，主要說下第三種第一種：用 form 自帶屬性action 提交第

***四種參數傳遞的形式——URL，超鏈接，js，form表單

ont meta get span form表單用戶名傳遞參數 rip con 什麽時候用GET, 查，刪什麽時候用POST,增，改（特列：登陸用Post,因為不能讓用戶名和密碼顯示在URL上） 4種get傳參方式 <html xmlns="http:/

多個按鈕提交一個form表單

class 按鈕控制 () ctx submit repo rep 事件多個按鈕提交一個form表單，然後執行控制層不同的方法在button的onclick事件下可以重寫form的action屬性 <button class="common_button" on

form表單下點選button按鈕提交後頁面重新整理問題解決

button,input type=button按鈕在IE和w3c，firefox瀏覽器區別當在IE瀏覽器下面時，button標籤按鈕，input標籤type屬性為button的按鈕是一樣的功能，不會對錶單進行任何操作。但是在W3C瀏覽器，如Firefox下就需要注意了，button標籤按鈕會提

Servlet 獲取前端Form表單資料，並實現請求重定向、請求轉發

1.前端介面編寫一個最簡單的登入介面： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title&g

form表單當滿足條件之後才提交表單的方法

使用form表單的onsubmit屬性，當屬性值為true時，則提交，當屬性值為false時，則不提交： <%@ page language="java" contentType="text/h

一個form表單中，上傳和接收多個相同的name欄位引數

一般我們在同一個表單中，都會提交不同的name欄位。可是，我遇到了提交相同欄位的情況，例子如下： <form action="test_receive.php" method="post"> <div> <

直接提交一個form表單後臺返回一個新頁面通過target屬性可以放到iframe當中

問題描述：　　我想提交一個form表單後臺直接返回一個新頁面，但是當前頁面還不想被替換掉；解決方案：　　在頁面中新增一個iframe將form表單的target屬性設定為iframe的id這樣的話返回的頁面會直接巢狀到iframe當中非常簡單方便。案例： <form id="fo

js通過後臺數據回填form表單時，select和radio選中問題

以select為例，radio類似 js通過後臺數據回填form表單時，設定select選中時，發現只能有一次有效，第二次就不能正常選中select了，問題是在select有2個被設定成了： selected = "selected" 所以在設定select屬性之前需要

在Struts2中，form 表單form與action之間傳值

參考示例前端頁面 <input type="text" id="msg_text"name="msg_text" value="<s:propertyvalue="msg_text"/>"/><s:hiddenname="backIn

查詢和匯出提交同一個form表單

//匯出提交表格start$("#exportButton").bind("click",function(){$("#search-form").attr("action","exportData.cc").submit();$("#search-form").attr(

ajax提交，form表單提交，onsubmit="return checksubmit()"提交驗證

相關推薦