jquery ajax 가 폼 데 이 터 를 제출 하 는 두 가지 방식

8003 단어 jqueryajax양식 을 제출 하 다
그 전에 AJAX 를 실현 하기 위해 자 바스 크 립 트 스 크 립 트 를 하나씩 두 드 려 서 번 거 로 웠 습 니 다.Jquery 를 공부 한 후에 AJAX 를 실현 하 는 것 이 그리 어렵 지 않다 고 느 꼈 습 니 다.물론 Jquery 프레임 외 에 다른 우수한 프레임 워 크 도 있 습 니 다.여기 서 유행 하 는 Jquery 를 다시 말씀 드 리 겠 습 니 다.Jquery AJAX 제출 양식 은 두 가지 방식 이 있 습 니 다.하 나 는 url 매개 변수 가 데 이 터 를 제출 하 는 것 이 고,다른 하 나 는 form 제출(평소 와 마찬가지 로 배경 에서 Form 폼 의 값 을 얻 을 수 있 습 니 다)입 니 다.제출 할 양식 에서 요소 가 많 으 면 두 번 째 방식 으로 제출 하 는 것 을 권장 합 니 다.물론'타자 수준'을 연습 하려 면 첫 번 째 방식 으로 제출 하 는 것 도 좋 습 니 다.개발 자 들 이 헛수고 하고 싶 지 않 을 것 이 라 고 믿 습 니 다!잔말 말고 실례 를 들 어 라.먼저 Jquery,Jquery.form 두 플러그 인 을 다운로드 해 야 합 니 다.인터넷 에 많 습 니 다!1.Url 매개 변수 제출 데이터
 
<script type ="text/javascript" src ="../js/jquery.js"></script> 
<script type="text/javascript"> 
function checkCorpID()//           
{ 
if($.trim($("#txtF_CORPID")[0].value)=="")//txtF_CORPID         
{ 
alert("       !"); 
} 
else 
{ 
$("#checkFlag").html("    ");//       
$.ajax({ 
type: "get", 
url: "CheckCorpID.ashx", 
data: "ID="+$.trim($("#txtF_CORPID")[0].value),//    ，   CheckCorpID.ashx?ID=XXX 
success: function(msg){$("#checkFlag").html("");alert( msg ); } //        ！msg         
}); 
} 
} 
</script>
배경 코드:
 
if(context.Request.Params["ID"].ToString()!="") 
{ 
Pxt.Logic.SYS.CORP_BASE_INFO cbiL = new Pxt.Logic.SYS.CORP_BASE_INFO(); 
bool flag=cbiL.checkCorpID(context.Request.Params["ID"].ToString()); 
if (flag) 
{ 
context.Response.Write("         !"); 
} 
else 
{ 
context.Response.Write("       !"); 
} 
}
2: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() 
{ 
$('#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">&nbsp;</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>
배경 코드:
 
protected void Page_Load(object sender, EventArgs e) 
{ 
{ 
if (Request.QueryString["flag"] != null && Request.QueryString["flag"].ToString() == "do") 
{ 
Pxt.Logic.DBRec.ReturnVisit bll = new Pxt.Logic.DBRec.ReturnVisit(); 
if (bll.Add(model(0)) > 0) 
{ 
Response.Write("    ！"); 
Response.End(); 
} 
} 
} 
} 
/**//// <summary> 
///       ，    ->     
/// </summary> 
/// <param name="id">ID </param> 
/// <returns></returns> 
private Pxt.Model.DBRec.ReturnVisit model(int id) 
{ 
//      
string F_CorpName = Request.Form["txtF_CorpName"].ToString(); 
string F_ReturnVisitTitle = Request.Form["txtF_ReturnVisitTitle"].ToString(); 
string F_ContractPerson = Request.Form["txtF_ContractPerson"].ToString(); 
string F_ContractPersonPosition = Request.Form["txtF_ContractPersonPosition"].ToString(); 
string F_ContractPhone = Request.Form["txtF_ContractPhone"].ToString(); 
DateTime F_ReturnVisitDate = DateTime.Parse(Request.Form["txtF_ReturnVisitDate"].ToString()); 
string F_ReturnVisitContent = Request.Form["txtF_ReturnVisitContent"].ToString(); 
string F_ReturnVisitFile = Request.Form["txtF_ReturnVisitFile"].ToString(); 
string Refer = Session["username"].ToString(); 
DateTime DoTime = DateTime.Now.Date; 
Pxt.Model.DBRec.ReturnVisit model = new Pxt.Model.DBRec.ReturnVisit(); 
if (id > 0)//    ，         
{ 
model.ID = id; 
} 
model.F_CorpName = F_CorpName; 
model.F_ReturnVisitTitle = F_ReturnVisitTitle; 
model.F_ContractPerson = F_ContractPerson; 
model.F_ContractPersonPosition = F_ContractPersonPosition; 
model.F_ContractPhone = F_ContractPhone; 
model.F_ReturnVisitDate = F_ReturnVisitDate; 
model.F_ReturnVisitContent = F_ReturnVisitContent; 
model.F_ReturnVisitFile = F_ReturnVisitFile; 
model.Refer = Refer; 
model.DoTime = DoTime; 
return model; 
}
주:Jquery.form 은 Jquery 가 폼 을 조작 하 는 데 도움 을 주 는 플러그 인 입 니 다.구체 적 으로 인터넷 에 가서 튜 토리 얼 을 보 세 요!
js 디지털 입력 상자(최대 값 최소 값 제한 과 반올림 포함)
JS 카운트다운 구현 코드(시,분,초)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage