(1)asp.net中一般的get和post请求以及前后端的交互

考虑到有很多人可能不知道asp.net中前端和后端是进行交互的,所以这里主要讲了数据交互。然后为了给后面的ajax作铺垫,这里还讲了get请求和post请求。

注:我使用的是visual studio,先建立一个asp.net web application项目,然后在项目中添加两个HTML页面(get.html和post.html),以及一个一般处理程序(Generic Handler).

1.get请求

  • 进入get.html页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>get</title>
</head>
<body>
    <!--action指定提交到哪-->
    <form action="http://www.baidu.com" method="get">
        <!--如果想在后端拿到input框里的值,就必须添加name属性-->
        <input type="text" name="userName"/><br />
        <input type="password" name="userPwd"/><br />
        <input type="submit" value="提交" />
    </form>
</body>
</html>
  • 运行
    (运行程序的时候,把你想要运行的页面设为起始页,不然可能会报错)
    在这里插入图片描述
  • 结果:
    在这里插入图片描述
    我们发现get请求是把信息拼接在地址上传给服务器。

2.post请求

  • 在了解了get请求之后,post请求就非常简单啦。我们只需要修改method=“post”
    进入post.html
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>post</title>
</head>
<body>
    <!--action指定提交到哪-->
    <form action="Handler.ashx" method="post">
        <!--如果想在后端拿到input框里的值,就必须添加name属性-->
        <input type="text" name="userName"/><br />
        <input type="password" name="userPwd"/><br />
        <input type="submit" value="提交" />
    </form>
</body>
</html>
  • 运行(记得把它设为起始页):
    在这里插入图片描述
    我们发现post请求将提交的数据放在请求头中。

3. 交互

  • 在了解了get和post请求之后我们来看一看前端和后端是怎么进行交互的。
    在asp.net中,我们是通过一般处理程序来交互数据的,现在我们用get请求来演示,我们把form的action属性值修改一下,让它来请求我们的一般处理程序。
    在这里插入图片描述
    (注:action的值需要和你建立的一般处理程序名字相同)
    当你建立了一个一般处理程序之后,里面会自动生成一些东西。
    在这里插入图片描述
  • context就是前端传入的数据封装成的一个对象。我们在这里handler.ashx里添加一点内容,取出我们输入的值,然后让它返回给浏览器显示给我们。顺便看看context里的内容。
    打上断点(方便查看)
    在这里插入图片描述
    (注意:这里的userName和userPwd就是你前端为input设置的name值,需要一一对应)
  • 在debug模式下运行程序,在input框内输入名字和密码,点击提交。
    然后进入vs中(这时候断点已经被触发)
    在这里我们可以看到context这个对象里面的内容。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    F11进入下一步
    在这里插入图片描述
    继续F11
    在这里你会看到这里的null值变为你输入框输入的值。
  • 继续运行程序,来到网页上
    在这里插入图片描述
    通过context.Response.Write(name+pwd);这句话我们将取到的内容又返回到页面上。

查看context内容以及获取前端输入值和前面get一样可以自己操作哦!

到此为止,我们就简单的了解了get和post请求以及前后端的交互。

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值