众所周知Web前端页面主要由HTML/CSS/Javascript组成,当要通过与用户的交互实现各种功能时,就需要向后台提交一些数据或者操作。在Web世界里各种实现眼花缭乱,但究其根本,不外乎三种方式,这也是由前端脚本、浏览器与后台交互规则决定的。

1、通过表单提交

这是HTML支持最传统的提交方法,需要创建表单,然后表单包含各种类型的表单元素,还要有一个提交按钮,通过提交按钮来提交到后台,这种方式提交后页面会刷新。

2、通过网页链接提交

可以在网页的链接附上需要提交的参数,当用户点击链接后,浏览器发起向链接的访问,从而也把链接附带的参数提交到后台,这种方式提交后页面也会刷新。

3、通过ajax提交

Javascript支持ajax方式创建HTTP请求,可以通过在HTML页面元素的事件处理函数中创建ajax请求,在url参数里携带所需提交的参数,从而提交到后台,这种方式提交后页面不会刷新。

在实际Web页面中,我们要根据实际用户交互的需要来选择合适的提交方式。

1、如果需要使用一些的表单类型用户输入,比如文本框、单选框、下拉框,那么可以选择第1种和第3种方式,如果希望提交后页面刷新就选第1种,如果不希望提交后页面刷新就选第3种。

2、如果不需要表单类型输入,那么可以选择第2种和第3种方式,如果希望提交后页面刷新就选第2种,如果不希望提交后页面刷新就选第3种。

.netMVC:Web页面向后台提交数据的方式和选择的更多相关文章

  1. Web页面向后台提交数据的方式和选择

    1.通过表单提交 这是HTML支持最传统的提交方法,需要创建表单,然后表单包含各种类型的表单元素,还要有一个提交按钮,通过提交按钮来提交到后台,这种方式提交后页面会刷新. 2.通过网页链接提交 可以在 ...

  2. [Python Web]常见的 POST 提交数据的方式

    本文参考整理于:https://imququ.com/post/four-ways-to-post-data-in-http.html 简介 这里介绍了,用 POST 方法提交数据时,常见的三种方式: ...

  3. 向后台提交数据:cookie,secure_cookie,

    向后台提交数据除了前端url,form表单,Ajax外还可以用cookie,secure_cookie,提交更多信息可以在用cookie基础上用session, cookie,secure_cooki ...

  4. [C#]Winform后台提交数据且获取远程接口返回的XML数据,转换成DataSet

    #region 接口返回的Xml转换成DataSet /// <summary> /// 返回的Xml转换成DataSet /// </summary> /// <par ...

  5. node学习笔记(二)(ajax方式向node后台提交数据)

    通过ajax向node后台提交数据过程(附手写前后台代码),并总结post与get的区别 POST 前台代码 //CSS简单给点样式 <style> form{ width: 200px; ...

  6. javascript 中数组的创建 添加 与将数组转换成字符串 页面三种提交请求的方式

    创建js数组 var array=new Array(); Java中创建数组 private String[] array=new String[3]; 两个完全不同的,js中是可变长度的 添加内容 ...

  7. js通过生成临时表单再删除的方式向后台提交数据(模拟ajax的post提交但还要跳转页面不返回数据)以及 struts向前台返回文件下载及防止中文乱码处理

    为了避免发送数据中有特殊字符,发送时用 encodeURIComponent 编码 (其实这个 if中是直接通过浏览器下载文件的方法,else是向后台传数据的方法) struts后台Action处理接 ...

  8. 向后台提交数据:利用cookie加session提交更多数据,

    个人逻辑,可能考虑不全面,各位看到后留言,我修改啊 实现效果:浏览器第一次访问提交用户名,后台验证通过,生成随机字符串,和用户名组成字典,保存到服务器,把随机字符串设置成cookie发给浏览器,同一个 ...

  9. JQuery-Ajax后台提交数据与获取数据

    function jqajax(){ var urlName = $("#urlName").val(); var urla = $("#url").val() ...

随机推荐

  1. Ionic2 调用自定义插件之研究

    cordova机制我在此就不提了,我们使用Typescript调用cordova plugin就如同调用第三方库是一个道理,那么这里就少不了书写declare文件,下面我就把几种封装调用的几种方式介绍 ...

  2. vue 中父子组件传值:props和$emit

    更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...

  3. 微信小程序底部弹框动画

    在写小程序的时候,一般会碰到底部弹出动画,就像下面这样的效果 直接进入正题 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.ht ...

  4. cf 816E Karen and Supermarket

    题目大意 给定\(n\)一颗树,每个点上有一个物品 每个物品有价格\(c[i]\) 有优惠券,能使价格减少\(d[i]\) 但是使用优惠券的前提时购买该物品,且父亲也使用优惠券 给定钱包余额\(lim ...

  5. 博客移至CSDN

    CSDN博客地址:http://blog.csdn.net/pilihaotian 博客园看心情更新.

  6. Something about the microsoft HttpContext domain design

    1. HttpContext.Current.Request, Response 2.HttpHandler-> ProcessRequest 3.HttpModule-> Init, I ...

  7. linux下kodi没有声音的解决

    前几天,心血来潮,就安装了manjaro的pre3版本,由于是mini kde版本的,就随手安装了kodi,可以用来看视频,听音乐和看图片. 结果在所有插件都折腾好了之后发现,在屏幕的右上角有一个喇叭 ...

  8. hdu 5055(模拟)

    Bob and math problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  9. hdu 2674(余数性质)

    N!Again Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  10. Codeforces Round #450 (Div. 2) C. Remove Extra One【*模拟链表/一个数比前面所有数大就是个record。删掉一个数,让record的个数尽量多。】

    C. Remove Extra One time limit per test 2 seconds memory limit per test 256 megabytes input standard ...