html基础:jquery的ajax获取form表单数据
jq是对dom进行的再次封装。是一个js库,极大简化了js使用
jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.min.js"></script>
这里主要介绍jquery获取页面form数据使用的过程
html页面代码如下,有一个form表单,id是login_value.填写内容后请求接口
- <form id="login_value">
- <div>
- <label>用户名:</label>
- <input id="username" type="text" name="username" placeholder="请输入用户名" value="admin">
- </div>
- <div>
- <label>密 码:</label>
- <input id="passwd" type="password" name="passwd" placeholder="请输入密码" value="123456">
- </div>
- <div>
- <input type="button" value="登陆" onclick="login()">
- <input type="reset" value="重置">
- </div>
- </form>
ajax使用:ajax只能传文本,不能传文件。
$.ajax({})
获取到数据,请求接口后,将接口返回信息显示到页面上
- <script src="jquery-1.11.1.min.js"></script>//引用jquery文件
- <script>
- function login(){
- var flag=confirm('你确认登陆么');//confirm时确认提示框,点击确认返回true,点击取消返回falseif(flag){//点击弹框的确认
- $.ajax({
- method:"post",
- data:$('#login_value').serialize(),//jq提供的获取form表单数据的快捷方式,通过form内标签的name属性{"username":"admin","passwd":"123456"}
- url:"http://localhost/api/user/login",
- success:function(data){//请求数据并返回结果给success,是一个对象,类似python的字典。回调函数。data只是一个函数的参数,跟上面的data不一样
- // console.log(data);
- if(data.error_code==0){//登陆成功,error_code=0。因为data是字典格式,可用点获取到
- //成功
- var sign = data.login_info.sign;//获取接口返回信息
- var userid = data.login_info.userId;
- console.log(sign);
- console.log(userid);
- // 拼接要显示的内容的标签
- var sign_span = '<div><span>' + sign + '</span></div>';
- var userid_span = '<div><span>' + userid + '</span></div>';
- var form_object = document.getElementById('login_value');//获取到form对象
- form_object.insertAdjacentHTML('afterEnd', sign_span + userid_span)//插入到获取标签的最后
- /*
- *
- * insertAdjacentHTML(where,tagStr): 父级标签内添加一个子标签字符串
- beforeBegin: 插入到获取到标签的前面
- afterBegin: 插入到获取到标签的子标签的前面
- beforeEnd: 插入到获取到标签的子标签的后面
- afterEnd: 插入到获取到标签的后面
- */
- }
- else{
- alert(data.msg)
- }
- }
- })
- }
- else{//点击弹框的取消
- alert('点击了取消')
- }
- }
- </script>
html基础:jquery的ajax获取form表单数据的更多相关文章
- 3..jquery的ajax获取form表单数据
jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...
- jquery实现ajax提交form表单的方法总结
本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一: function AddHandlingFeeToRefund( ...
- jquery的ajax提交form表单方式总结
方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderServic ...
- jquery实现ajax提交form表单的方法总结(转)
方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement ...
- JS获取form表单数据
以下代码可放在一个js文件中,以便通用: //获取指定表单中指定标签对象 function getElements(formId, label) { var form = document.getEl ...
- jquery使用ajax提交form表单
$.ajax({ type: jqform.attr('method'), // 提交方式 get/post url: jqform.attr('action'), // 需要提交的 url data ...
- django ajax提交form表单数据
后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...
- jquery的ajax提交form表单
$.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#yourformid').serialize(),// ...
- 【MVC】使用FormCollection获取Form表单数据
public ActionResult Create(FormCollection form) { string name = form["name"]; //姓名 string ...
随机推荐
- 2020-07-07:mysql如何实现跨库join查询?
福哥答案2020-07-07: 1.同服务跨库.表名称带上库名.SELECT * FROM 数据库名称1.表名称 JOIN 数据库名称2.表名称 ON 数据库名称1.表名称.tid = 数据库名称2. ...
- C#LeetCode刷题之#39-组合总和(Combination Sum)
目录 问题 示例 分析 问题 该文章已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3663 访问. 给定一个无重复元素的数组 candi ...
- Css 设置超过再两行显示省略号
大部分场景都是超过一行就显示... <template> <div class="other-product-item item-name" :title=&qu ...
- 极简 Node.js 入门 - 2.2 事件
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- matlab使用libsvm入门教程——使用matlab安装配置libsvm以及一个svm分类实例
前言 此教程专注于刚入门的小白, 且博客拥有时效性, 发布于2019年3月份, 可能后面的读者会发现一些问题, 欢迎底下评论出现的问题,我将尽可能更新解决方案. 我开始也在如何安装libsvm上出现了 ...
- css中关于:nth-child()和:nth-of-type()的深入理解
css中关于:nth-child()和:nth-of-type()的深入理解 在css中有这样一类属性,是以:nth-开头的,其中最常见的就是:nth-child() 和 :nth-of-type() ...
- Jmeter 常用函数(27)- 详解 __env
如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 获取环境变量的值 语法格式 ${__e ...
- Spark on Yarn运行时加载的jar包
spark on yarn运行时会加载的jar包有如下: spark-submit中指定的--jars $SPARK_HOME/jars下的jar包 yarn提供的jar包 spark-submit通 ...
- Tugnsten Fabric-MPLS-三层转发
1.网络拓扑图如下: 2.场景:虚机1.1.1.3 ping 虚机3.3.3.3(两个虚机加入到虚拟路由器里面了,所以可以互通) 3.查看虚机1.1.1.3所对应的VRF: 4.其中41为mpls标签 ...
- 洛谷 P3951 NOIP 2017 小凯的疑惑
洛谷 P3951 NOIP 2017 小凯的疑惑 题目描述 小凯手中有两种面值的金币,两种面值均为正整数且彼此互素.每种金币小凯都有 无数个.在不找零的情况下,仅凭这两种金币,有些物品他是无法准确支付 ...