前端之家收集整理的这篇文章主要介绍了
ajax异步调用，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
服务端aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RA_PublicityOnLineInfo.aspx.cs" Inherits="HMFW.Web.Pages.SQJS.ResidentsAutonomy.RA_PublicityOnLineInfo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网上公示信息管理</title>
<script src="/Js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script src="/Js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Js/jquerytree/jquery.ztree.core-3.1.min.js" type="text/javascript"></script>
<link href="/Js/jquerytree/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="/Js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/Js/jquery.validate.js" type="text/javascript"></script>
<script src="/Js/jquery.form.js" type="text/javascript"></script>
<link href="/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/Js/jquery-loadmask-0.4/jquery.loadmask.min.js" type="text/javascript"></script>
<link href="/Js/jquery-loadmask-0.4/jquery.loadmask.css" rel="stylesheet" type="text/css" />
<script src="/Js/edit.js" type="text/javascript"></script>
<script src="/Js/Common.js" type="text/javascript"></script>
<script src="/Js/Pages/SQJS/ResidentsAutonomy/RA_PublicityOnLineInfo.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="T_Content" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"
class="content02">
<thead>
<tr>
<td colspan="4" class="content01bt">
<span runat="server" id="acTitle">公示信息</span>[<span runat="server" id="ActionInfo">新增</span>]
</td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="nowrap" width="13%" class="tdleft">
<span class="red">*</span>公示类别：
</td>
<td nowrap="nowrap" width="37%" class="tdright">
<asp:DropDownList ID="iTypeCode" runat="server" class="xlk180" ContentEditable="false">
<asp:ListItem Value="1">选举通知</asp:ListItem>
<asp:ListItem Value="2">选民登记通知</asp:ListItem>
<asp:ListItem Value="3">初步候选人信息</asp:ListItem>
<asp:ListItem Value="4">正式候选人信息</asp:ListItem>
<asp:ListItem Value="5">正式选举内容和时间</asp:ListItem>
<asp:ListItem Value="6">选举结果公示</asp:ListItem>
</asp:DropDownList>
<asp:HiddenField runat="server" ID="siTypeCode" />
</td>
<td>是否公示：</td>
<td>
<asp:DropDownList ID="iOnLine" runat="server" class="xlk180" ContentEditable="false">
<asp:ListItem Value="1">是</asp:ListItem>
<asp:ListItem Value="0">否</asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td nowrap="nowrap" class="tdleft"><span class="red">*</span>公示时间：
</td>
<td align="left" colspan="3">
<asp:TextBox ID="txt_dPublictityStartTime" runat="server" onclick="WdatePicker()" class="srk80"></asp:TextBox>至<asp:TextBox ID="txt_dPublicityEndTime" runat="server" onclick="WdatePicker()" class="srk80"></asp:TextBox>
<asp:HiddenField runat="server" ID="dPublictityStartTime" />
<asp:HiddenField runat="server" ID="dPublicityEndTime" />
</td>
</tr>
<tr>
<td nowrap="nowrap" class="tdleft">
<span class="red">*</span>公示内容：
</td>
<td nowrap="nowrap" class="tdright" colspan="3">
<asp:TextBox ID="txt_sContent" runat="server" TextMode="MultiLine" class="Memo"></asp:TextBox>
<asp:HiddenField runat="server" ID="sContent" />
</td>
</tr>
<tr>
<td nowrap="nowrap" class="tdleft">备注：
</td>
<td nowrap="nowrap" class="tdright" colspan="3">
<asp:TextBox ID="txt_sMemo" runat="server" TextMode="MultiLine" class="Memo"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<div class="tbError" id="LJRYerror">
</div>
<table width="100%" height="36" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<xhm:xhmButtionEasyUI ID="btn_Save" runat="server" IconTypeSelected="save" OnClientClick="Save(false);return false">保存</xhm:xhmButtionEasyUI>
<xhm:xhmButtionEasyUI ID="btn_SaveandAdd" runat="server" IconTypeSelected="save"
OnClientClick="Save(true);return false;">保存并新增</xhm:xhmButtionEasyUI>
<xhm:xhmButtionEasyUI ID="btn_Return" runat="server" IconTypeSelected="back" OnClientClick="NBack(infoflag);return false;">返回</xhm:xhmButtionEasyUI>
</td>
</tr>
</table>
</div>
<input type="hidden" id="hidID" runat="server" />
</form>
</body>
</html>
前端javascript
var infoflag = true; //是否需要给父页面赋值 True 弹出框口 需要 False 打开新页面 不需要
var handleurl = "/Handle/SQJS/ResidentsAutonomy/RA_PublicityOnLine.ashx"; //一般处理程序路径
//http://localhost:56248/Handle/SQJS/ResidentsAutonomy/RA_Candidate.ashx
var candidateHandleUrl = "/Handle/SQJS/ResidentsAutonomy/RA_Candidate.ashx";//确定初步候选人和确定正式候选人
//http://localhost:56248/Handle/SQJS/ResidentsAutonomy/RA_ElectionProject.ashx
var electionProjectHandleUrl = "/Handle/SQJS/ResidentsAutonomy/RA_ElectionProject.ashx";//确认正式选举内容和时间和确认选举结果
var type = getParameter("iType");//页面状态 编辑或者查看
$(function () {
/******隐藏check 操作按钮*************/
if (type == "view") {
$("#btn_Save").hide();//保存
$("#btn_SaveandAdd").hide();//保存并新增
infoflag = false;//用于查看界面 返回
$("#ActionInfo").text("查看"); //把标识设置为查看
$("#T_Content .red").css({ "display": "none" });//查看去除必填选项标识
$("#T_Content").find("input").attr("disabled","disabled");//input
$("#T_Content").find("textarea").attr("disabled","disabled");//textarea
$("#iTypeCode").attr("disabled","disabled");//公示类别
$("#iOnLine").attr("disabled","disabled");//是否公示
}
var ID = GetID();
if (ID != "") {
Load(ID);
}
$("#iTypeCode").change(function () {
var checkValue = $("#iTypeCode").val();
var ID = GetID();//网上公示ID
var gProjectID = getParameter("gProjectID");//选举项目ID
if (ID == "") {//相关公式信息表：RA_Candidate RA_ElectionProject View_SQ_RA_ElectionProject_sPreliminaryConfirm View_SQ_RA_ElectionProject_sFormallyConfirm
switch (checkValue) {
case "3"://确定初步候选人【正式确认为1】
clearFields1();
$.ajax({
type: "POST",//用POST方式传输
dataType: "json",//数据格式:JSON
url: handleurl,//目标地址
data: "action=preliminary&gID=" + gProjectID,cache: false,success: function (data) {
//数据获取完毕，填充页面据显示
if (data != null && data != "") {
LoadData1(data);
}
},error: function (XmlHttpRequest,textStatus,errorThrown) { $.messager.alert('错误',errorThrown,'error'); },beforeSend: function () {
},complete: function () {
$("hidLoad").val("1");
}
});
break;
case "4":
clearFields1();
$.ajax({
type: "POST",//目标地址
data: "action=formally&gID=" + gProjectID,complete: function () {
$("hidLoad").val("1");
}
});
break;
case "5":
clearFields2();
$.ajax({
type: "POST",//数据格式:JSON
url: electionProjectHandleUrl,//目标地址
data: "action=get&gID=" + gProjectID,success: function (data) {
//数据获取完毕，填充页面据显示
if (data != null && data != "") {
$("#txt_dPublictityStartTime").val(renderTime(data.dStartDate,true));//开始时间dPublictityStartTime
$("#txt_dPublicityEndTime").val(renderTime(data.dEndDate,true));//结束时间
$("#txt_sContent").val(data.sProjectContent);//公示内容
$("#dPublictityStartTime").val(renderTime(data.dStartDate,true));//公示开始时间
$("#dPublicityEndTime").val(renderTime(data.dEndDate,true));//公示结束时间
$("#sContent").val(data.sProjectContent);//公示内容
//$("#txt_sMemo").val(data.sMemo);//备注
}
},complete: function () {
$("hidLoad").val("1");
}
});
break;
case "6":
clearFields2();
$.ajax({
type: "POST",//目标地址
data: "action=getivotecount&gID=" + gProjectID,true));//结束时间
$("#txt_sContent").val(data.iVoteCount);//公示内容：现场选举 网上选举 结果汇总
$("#dPublictityStartTime").val(renderTime(data.dStartDate,true));//公示结束时间
$("#sContent").val(data.iVoteCount);//公示内容
//$("#txt_sMemo").val(data.sMemo);//备注
}
},complete: function () {
$("hidLoad").val("1");
}
});
break;
default:
clearFields3();
break;
}
} else if (ID != "") {//RA_PublicityOnLine表
Load(ID);
}
});
});
function Load(ID) {
$.ajax({
type: "POST",//用POST方式传输
dataType: "json",//数据格式:JSON
url: handleurl,//目标地址
data: "action=get&gID=" + ID,success: function (data) {
//数据获取完毕，填充页面据显示
if (data != null && data != "") {
LoadData(data);
IsPublicityOnLine(data);//页面加载 设置属性值
}
},beforeSend: function () {
},complete: function () {
$("hidLoad").val("1");
}
});
}
function IsPublicityOnLine(data) {
$("#iTypeCode").attr("disabled","disabled");
var iTypeCode = data.iTypeCode;
switch (iTypeCode) {
case 3:
$("#txt_sContent").attr("disabled","disabled");//正式选举内容
break;
case 4:
$("#txt_sContent").attr("disabled","disabled");//正式选举内容
break;
case 5:
clearFields2();
case 6:
clearFields2();
break;
default:
break;
}
}
function LoadData(data) {
SetInputValue(data);
$("#txt_dPublictityStartTime").val(renderTime(data.dPublictityStartTime,true));//公示开始时间
$("#txt_dPublicityEndTime").val(renderTime(data.dPublicityEndTime,true));//公示结束时间
$("#dPublicityEndTime").val(renderTime(data.dPublicityEndTime,true));//公示结束时间
$("#dPublictityStartTime").val(renderTime(data.dPublictityStartTime,true));//公示开始时间
$("#sContent").val(data.sContent);
$("#siTypeCode").val(data.iTypeCode);
}
function LoadData1(data) {
$("#txt_sContent").val(data.sCandidatePeopNames);//公示内容
$("#sContent").val(data.sCandidatePeopNames);//公示内容
//$("#txt_sMemo").val(data.sMemo);//备注
}
function CheckInput() {
var result = $("#form1").validate({
rules: {
txt_dPublictityStartTime: {
required: true,dateISO: true
},txt_dPublicityEndTime: {
required: true,txt_sContent: {
required: true,maxlength: 500
}
}
});
return result.form();
};
function CheckInput1(iTypeCode) {
var result;
if (GetID() == "") {
var gProjectID = getParameter("gProjectID");//选举项目ID
$.ajax({
type: "POST",url: handleurl,data: "action=ismanypublicityonline&gProjectID=" + gProjectID + "&iCode=" + iTypeCode,dataType: "json",async: false,XmlHttpRequest.responseText,success: function (returnJsonValue) {
if (returnJsonValue.result == false) {
$.messager.alert('信息',returnJsonValue.data,'info');
result = returnJsonValue.result.toString();
}
//clearFields(); //清空界面和隐藏域ID
},beforeSend: function () {
},complete: function () {
}
});
}
return result;
}
function Save(isDoNew) {
var iTypeCode = $("#iTypeCode").val();//网上公示类型
var action = "add";
var queryString = $('#T_Content :input').fieldSerialize();
if (GetID() != "") {
action = "edit";
iTypeCode = $("#siTypeCode").val();
}
var sTypeName = "";//公示类别
if (iTypeCode != "") {//公示类别
sTypeName = $("#iTypeCode").find("option:selected").text();
}
queryString += "&sTypeName=" + sTypeName;
if (CheckInput1(iTypeCode) == "false") {//先验证同一个项目不允许有多个相同类别公式! 后验证基础信息
return false;
}
var data = "action=" + action + "&gID=" + GetID() + "&" + queryString + "&gProjectID=" + getParameter("gProjectID"); //
Save_1(isDoNew,handleurl,data,infoflag);
}
function clearFields2() {
//////////////$("#txt_dPublictityStartTime").attr("disabled","disabled");//开始时间
//////////////$("#txt_dPublicityEndTime").attr("disabled","disabled");//结束时间
$("#txt_sContent").attr("disabled","disabled");//正式选举内容
}
//设置界面属性值 确定正式选举内容和时间
function clearFields1() {
//////////$("#txt_dPublictityStartTime").attr("disabled",false);//开始时间
//////////$("#txt_dPublicityEndTime").attr("disabled",false);//结束时间
$("#txt_sContent").attr("disabled","disabled");
}
function clearFields3() {
$("#iTypeCode").attr("disabled",false);//
//////////$("#txt_dPublictityStartTime").attr("disabled",false);//
//////////$("#txt_dPublicityEndTime").attr("disabled",false);//
$("#txt_sContent").attr("disabled",false);//正式选举内容
SetID(""); //清空ID的隐藏域
$("#txt_dPublictityStartTime").val("");
$("#txt_dPublicityEndTime").val("");
$("#sContent").val("");
$("#txt_sContent").val("");
$("#txt_sMemo").val("");
$("#iOnLine").val("1");
}
function clearFields() {
$("#iTypeCode").attr("disabled",false);//
////////$("#txt_dPublictityStartTime").attr("disabled",false);//
////////$("#txt_dPublicityEndTime").attr("disabled",false);//正式选举内容
SetID(""); //清空ID的隐藏域
$('#T_Content :input').clearFields(); //清空界面
$("#sContent").val("");
//$("#siTypeCode").val("");
$("#iTypeCode").val("1");
$("#iOnLine").val("1");
}
原文链接：https://www.f2er.com/ajax/163275.html
