前后端交互

Posted 2020-09-17 bkin的笔记

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前后端交互相关的知识，希望对你有一定的参考价值。

1.ajax交互

btn,服务器和html控件都可以

<input type="button" id="btnSave" value="提交" />

$("#btnSave").click(function () {
                var Title = $("#Title").val();
                var Suggest = $("#Suggest").val();
                var UserId = $("#UserId").val();
                var tip = "";
                if (Title == "")
                    tip += "标题不能为空！ ";
                if (Suggest == "")
                    tip += "内容不能为空！ ";
                if (tip.length > 0) {
                    alert(tip);
                    return;
                }
                var IsAnonymous = "1";
                var ischeck = document.getElementById("cbIsEnable").checked;
                if (ischeck)
                    IsAnonymous = "1";
                else
                    IsAnonymous = "0";

                $.ajax({
                    url: "PoliticalSuggest.aspx/PoliticalSave", //发送到本页面后台
                    type: "POST",
                    dataType: "json",
                    async: true, //async翻译为异步的，false表示同步，会等待执行完成，true为异步
                    contentType: "application/json; charset=utf-8", //不可少
                    data: "{Title:‘" + Title + "‘,Suggest:‘" + Suggest + "‘,UserId:‘" + UserId + "‘,IsAnonymous:‘" + IsAnonymous + "‘}",
                    success: function (data) {
                        if (data.d == "suc") {
                            alert("保存成功！");
                            location.reload();
                        }
                        else {
                            alert("保存失败！");
                        }
                    },
                    error: function (msg) {
                        alert("请求出错! " + msg);
                    }
                });

            });
        });

后端：

[System.Web.Services.WebMethod()]
        public static string PoliticalSave(string Title, string Suggest, string UserId, string IsAnonymous)
        {
            try
            {
                string sql = string.Format("insert [McsIPS].[dbo].[PoliticalSuggest](Id,PhoneNo,UserId,IsAnonymous,Title,Suggest,CreateTime) values(NEWID(),‘{0}‘,‘{1}‘,‘{2}‘,‘{3}‘,‘{4}‘,‘{5}‘)", "", UserId, IsAnonymous, Title, Suggest, DateTime.Now);
                WriteTextLog("PoliticalSave", "1", sql, DateTime.Now);
                DbHelperSQL.ExecuteSql(sql);
            }catch(Exception exp)
            {
                WriteTextLog("PoliticalSave", "2", exp.Message, DateTime.Now);
                return exp.Message;
            }
            
            return "suc";
        }

2. iframe交互

PoliticalSuggest.aspx

<asp:CheckBox AutoPostBack="True" runat="server" id="cbIsEnable" Checked="true" Text="匿名发表" 
                    oncheckedchanged="cbIsEnable_CheckedChanged" />

<asp:Panel runat="server" id="panelMobile" Visible="false">
        <iframe src="GetMobile.aspx" name="123" width="0" height="0" scrolling="auto" frameborder="0" >
        </iframe>
    </asp:Panel>

protected void cbIsEnable_CheckedChanged(object sender, EventArgs e)
        {
            CheckBox cb = sender as CheckBox;
            if (cb == null)
                return;
            if (cb.Checked)
            {
                panelMobile.Visible = false;
            }
            else
            {
                panelMobile.Visible = true;
            }
        }

GetMobile.aspx

<!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">
<head runat="server">
    <title></title>
    <script language="javascript">

    window.onload = function () {
        var x = document.getElementById("PhoneNo").innerHTML;
        parent.ShowSubInfo(x);
    }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="PhoneNo" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>
</html>

protected void Page_Load(object sender, EventArgs e)
        {

            this.PhoneNo.Text = GetCurrentUserId();
        }

private string GetCurrentUserId()
        {
            string username = GetCurrentADUser();
            string sql = "select UserID,mobileiphone,Mobile from User where UserName=‘" + username + "‘";
            DataSet ds = DbHelperSQL.Query(sql);
            if (ds != null && ds.Tables != null && ds.Tables.Count > 0)
            {
                var UserID = ds.Tables[0].Rows[0]["UserID"] == null ? "" : ds.Tables[0].Rows[0]["UserID"].ToString();
                var mobileiphone = ds.Tables[0].Rows[0]["mobileiphone"] == null ? "" : ds.Tables[0].Rows[0]["mobileiphone"].ToString();
                var Mobile = ds.Tables[0].Rows[0]["Mobile"] == null ? "" : ds.Tables[0].Rows[0]["Mobile"].ToString();
                var PhoneNo = mobileiphone.Equals("") ? Mobile : mobileiphone;
                return UserID + ";" + PhoneNo;
            }
            return "";
        }

然后PoliticalSuggest.aspx接收查询的结果：

function ShowSubInfo(szValue) {
            if (szValue == "") {
                document.getElementById("PhoneNo").value = szValue;
                document.getElementById("hfUserId").value = szValue;
            }
            var szArr = szValue.split(";");
            if (szArr.length > 1) {
                document.getElementById("hfUserId").value = szArr[0];
                document.getElementById("PhoneNo").value = szArr[1];
            }
        }

以上是关于前后端交互的主要内容，如果未能解决你的问题，请参考以下文章