js前台页面与后台如何传参

Posted 2023-03-21

tags:

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

　　实现前端和后端的参数传递，其实就是前端（页面）向服务器发起一个请求，在请求中附带了一些我们需要的参数。当服务器端接收到这个请求后，通过解析得要我们要传递的参数，这要就达到了我们的目的了。

举两个例子

java我们可以通过：

request.getParameter("xxxx");//xxxx表示参数名称来获取请求参数名称

C#我们可以通过：
GET请求参数用 Request.QueryString，获取POST请求参数用Request.Form

下面讲下POST和GET请求的主要区别：

　　1、GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连。POST把提交的数据则放置在是HTTP包的包体中。

　　2、GET方式提交的数据最多只能是1024字节，理论上POST没有限制。

　　3、POST的安全性要比GET的安全性高。安全的含义是真正的Security的含义，比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存，(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了。

参考技术A 要传递数据，无非就是GET和POST两种方法，如果是GET，那就是把参数附在URL后面。比如：
http://zhidao.baidu.com/question/298796196.html?fr=uc_ma_push&fl=red
问号后面的，就是两个fr fl的参数及其值。
如果是POST，那就是传递表单中数据。当然，如果提交表单时用的是GET的方法，也会变成URL的方式。本回答被提问者采纳参考技术B

action 传值

<a target="ajaxTodo" href="approveModel!delete?modelId=slt_uid" title="您确定要删除该信息吗?"><span>删除</span></a>

ajax 传值

$.ajax(

type : "Get",

url : "approveModel!getDeptAjax?nickName="

+ nickName ,

dataType : "json",

success : function(data)

if(data.state == "erro")

alert(data.msg);

return;

参考技术C 可以js赋值给隐藏域后台去取隐藏域的值用ajax更好参考技术D ajax会吗？用ajax就行了

js前台与后台数据交互-前台调后台

前台调用后台方法与变量：

方法一：通过WebService来实现

步骤：

后台

? 首先引入命名空间（using System.Web.Services;）

? 然后定义公共的静态的方法（必须为public和static的,且静态方法不能访问外部的非静态变量，此时后台与前台相当于父类与子类的关系），并在该方法头部上加上[System.Web.Services.WebMethod]，来标注方法特性。

前台

? 添加ScriptManager服务器控件，并把其EnablePageMethods属性设为true。

? 通过PageMethods方法调用后台定义的public、static方法

PageMethods方法简介：

PageMethods.FunctionName(Paramter1,Parameter2,...,funRight,funError, userContext);

1) Paramter1,Parameter2,...,表示的是FunctionName的参数,类型是Object或Array；

2) funRight是方法调用成功后的回调函数，对返回值进行处理

3) funError是当后台的FunctionName方法发生异常情况下的执行的Js方法（容错处理方法），

4) userContext是可以传递给SuccessMethod方法，或是FailedMethod方法的任意内容。

举例：

后台代码：

　　

[html] view plain copy

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
namespace WebApplication4
{
public partial class WebForm10 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string test1(string userName)
{
return "hello "+userName+", 这是通过WebService实现前台调用后台方法";
}
}
}

前台代码：

　　

[html] view plain copy

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx.cs" Inherits="WebApplication4.WebForm10" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<%--引入ScriptManager服务器控件--%>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<script type="text/javascript">
function bclick() {
PageMethods.test1("zhipeng", funRight);
}
function funRight(val) //回调函数，用val接受后台代码test1的执行结果
{
alert(val);
}
</script>
<input id="Button1" type="button" value="方法测试" onclick="bclick()" />//点击按钮会弹出对话框“通过WebService实现前台调用后台方法”
</form>
</body>
</html>

点击按钮弹出如下对话框：

　　技术分享

方法二：通过<%=methodname()%>和<%#methodname()%>（methodname()为后台定义的方法）

这种方法调用的后台方法可能出现在前台的位置有3种情况：

1) 服务器端控件或HTML控件的属性

2) 客户端js代码中

3) Html显示内容的位置（它作为占位符把变量显示于符号出现的位置）

这里对两者做简单实例，详细内容在后面文章中介绍

步骤：

后台

? 定义public或protected的变量或方法（不能为private）

前台

? 直接用<%= %>和<%# %>对后台变量或方法进行调用，两者的用法稍有差异（<%# %>基本上能实现<%= %>的所以功能）

举例：

后台代码：

　　

[html] view plain copy

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication4
{
public partial class WebForm1 : System.Web.UI.Page
{
public string name = "我是后台变量";
protected void Page_Load(object sender, EventArgs e)
{
this.DataBind();
}
//不能为private
protected string strTest() {
return "这是前台通过<%# %>调用后台方法";
}
public void strTest2()
{
Response.Write("这是前台通过<%= %>调用后台方法");
}
}
}

前台代码：

　　

[html] view plain copy

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<b>服务器控件</b><br /><br />
服务器端文本框绑定后台方法：<asp:TextBox ID="TextBox1" runat="server" Text="<%#strTest()%>"></asp:TextBox><%=strTest()%><br />　
......................变量：<asp:TextBox ID="TextBox2" runat="server" Text="<%#name%>"></asp:TextBox><br />　
服务器端文本框绑定后台方法：<asp:Label ID="Label1" runat="server" Text="Label"><%=strTest()%></asp:Label><br />
服务器端文本框绑定后台方法：<asp:Label ID="Label2" runat="server" Text="<%#strTest() %>"></asp:Label><br /><br />
<br /><br />
<b>客户端控件</b><br /><br />
客户端文本框绑定后台方法：<input id="Text1" type="text" value="<%#strTest()%>" /><%=name %><br />　
客户端标签: <div><%=strTest() %></div>
</div>
</form>
</body>
</html>

运行结果：

　　技术分享

<%=methodname()%>和<%#methodname()%>两种方式的详细介绍（联系与区别）会在后面文章中详细介绍。

方法三：通过隐藏服务端按钮来实现

后台代码：

　　

[html] view plain copy

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication4
{
public partial class WebForm11 : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write("这是通过隐藏控件方式实现前台访问后台方法");
}
}
}

前台代码：

　　

[html] view plain copy

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx.cs" Inherits="WebApplication4.WebForm11" %>
<!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 type="text/javascript" >
function test() {
//通过客户端脚本选中隐藏控件，并调用后台相关方法
document.getElementById("Button1").click();
};
</script>
</head>
<body>
<form id="form1" runat="server">
<%--隐藏服务端铵钮--%>
<asp:Button ID="Button1" runat="server" Text="Button" style="display:none" />
<%--调用客户端脚本，间接调用后台方法--%>
<input id="Button2" type="button" value="button" onclick="test()" />
</form>
</body>
</html>

总结：

　　方法一的后台方法必须声明为public和static（否则会发生PageMethods未定义错误）,正是由于要将方法声明为static,使得这两种方法都有局限性，即静态方法中只允许访问静态成员变量。所以要想用这两种方式调用后台方法，后台方法中是不能访问非静态成员变量的。

　　方法二，后台方法没有任何限制，但是前台调用的时候由于<%=%>是只读的，<%=%>适合于调用后台方法经过处理并返回给客户端使用，不适合于将数据传到后台供后台使用

　　后面会讲后台调用前台js代码。。。

以上是关于js前台页面与后台如何传参的主要内容，如果未能解决你的问题，请参考以下文章

WPF后台如何获得前台XAML中对象

js前台页面显示中文，后台存对应的value值实现

如何前台JS进行加密，后台java进行解密？

Ajax前台如何向后台传值呢,本人对ajax不懂,肯定大神帮助,在此谢谢了.

asp.net后台怎么返回一个 bool给前台js用

java后台接收前台传过来的参数只能是字符串类型吗？