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 ...
随机推荐
- Java—包装类/System类/Math类/Arrays类/大数据运算/Collection接口/Iterator迭代器
基本类型包装类 8种基本类型对应的包装类如: 将字符串转成基本类型: 将基本数值转成字符串有3种方式: 基本类型直接与””相连接即可:34+" " 调用String的valueOf ...
- 栈及其简单应用(二)(python代码)
一.括号判定 前一篇文章我们介绍了栈的简单应用中,关于括号的判定,但那只是一种括号的判定,下面我们来介绍多种括号混合使用时,如何判断括号左右一一对应. 比如“{}{(}(][”这种情况,需要对一种括号 ...
- C#LeetCode刷题-哈希表
哈希表篇 # 题名 刷题 通过率 难度 1 两数之和 C#LeetCode刷题之#1-两数之和(Two Sum) 42.8% 简单 3 无重复字符的最长子串 24.2% 中等 18 四数之和 ...
- 338. Counting Bits题目详解
题目详情 Given a non negative integer number num. For every numbers i in the range 0 ≤ i ≤ num calculate ...
- 怎么把txt转换成excel
地址: https://jingyan.baidu.com/article/c1465413b2f2c50bfdfc4c61.html
- 【NOI2015】荷马史诗 - 哈夫曼树
题目描述 追逐影子的人,自己就是影子 ——荷马 Allison 最近迷上了文学.她喜欢在一个慵懒的午后,细细地品上一杯卡布奇诺,静静地阅读她爱不释手的<荷马史诗>.但是由<奥德赛&g ...
- C、C++、Java、Python该怎么选
对于很多对编程感兴趣的小伙.或是正在读计算机专业的大学生来说,不知道要选择哪一门编程语言发展.对于计算机专业的学生,一般的学习都普遍会开始设C.C++.Java等热门的编程语言,但还是不太清楚选择哪一 ...
- Vue学习(十三)模版引擎算是预处理器吗?
前言 今天在看vue-loader预处理器配置相关的内容,突然看到了Pug,然后有了一个疑问:模版引擎原来是预处理器吗? 答案是:YES 说明 这里重点讨论使用不同的js模板引擎作为预处理器, 下面示 ...
- python基础 Day12
python Day12 生成器python社区,生成器与迭代器看成一种.生成器的本质就是迭代器. 区别:生成器是我们自己用python代码构建的数据结构.迭代器都是提供的,或者转化得来的. 获取生成 ...
- oracle进行一对多关联查询的时候,获取副表(也就是多条记录的那张表)的最新一条记录进行关联,如何获取多条记录最新一条呢?
例如以下场景: 一条新闻对应多条审核记录,用户想知道这条新闻走到哪一步审核了. 使用:select * from (select b.*,(ROW_NUMBER() OVER (PARTITION B ...