jq是对dom进行的再次封装。是一个js库,极大简化了js使用

jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.min.js"></script>

这里主要介绍jquery获取页面form数据使用的过程

html页面代码如下,有一个form表单,id是login_value.填写内容后请求接口

  1. <form id="login_value">
  2. <div>
  3. <label>用户名:</label>
  4. <input id="username" type="text" name="username" placeholder="请输入用户名" value="admin">
  5. </div>
  6. <div>
  7. <label>密 码:</label>
  8. <input id="passwd" type="password" name="passwd" placeholder="请输入密码" value="123456">
  9. </div>
  10. <div>
  11. <input type="button" value="登陆" onclick="login()">
  12. <input type="reset" value="重置">
  13. </div>
  14.  
  15. </form>

ajax使用:ajax只能传文本,不能传文件。

$.ajax({})

获取到数据,请求接口后,将接口返回信息显示到页面上

  1. <script src="jquery-1.11.1.min.js"></script>//引用jquery文件
  2. <script>
  3. function login(){
  4. var flag=confirm('你确认登陆么');//confirm时确认提示框,点击确认返回true,点击取消返回falseif(flag){//点击弹框的确认
  5. $.ajax({
  6. method:"post",
  7.  
  8.   data:$('#login_value').serialize(),//jq提供的获取form表单数据的快捷方式,通过form内标签的name属性{"username":"admin","passwd":"123456"}
  9. url:"http://localhost/api/user/login",
  10. success:function(data){//请求数据并返回结果给success,是一个对象,类似python的字典。回调函数。data只是一个函数的参数,跟上面的data不一样
  11. // console.log(data);
  12.  
  13. if(data.error_code==0){//登陆成功,error_code=0。因为data是字典格式,可用点获取到
  14. //成功
  15. var sign = data.login_info.sign;//获取接口返回信息
  16. var userid = data.login_info.userId;
  17. console.log(sign);
  18. console.log(userid);
  19.  
  20. // 拼接要显示的内容的标签
  21. var sign_span = '<div><span>' + sign + '</span></div>';
  22. var userid_span = '<div><span>' + userid + '</span></div>';
  23. var form_object = document.getElementById('login_value');//获取到form对象
  24. form_object.insertAdjacentHTML('afterEnd', sign_span + userid_span)//插入到获取标签的最后
  25. /*
  26. *
  27. * insertAdjacentHTML(where,tagStr): 父级标签内添加一个子标签字符串
  28. beforeBegin: 插入到获取到标签的前面
  29. afterBegin: 插入到获取到标签的子标签的前面
  30. beforeEnd: 插入到获取到标签的子标签的后面
  31. afterEnd: 插入到获取到标签的后面
  32. */
  33. }
  34. else{
  35. alert(data.msg)
  36. }
  37. }
  38.  
  39. })
  40.  
  41. }
  42. else{//点击弹框的取消
  43. alert('点击了取消')
  44. }
  45. }
  46. </script>

html基础:jquery的ajax获取form表单数据的更多相关文章

  1. 3..jquery的ajax获取form表单数据

    jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...

  2. jquery实现ajax提交form表单的方法总结

    本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一:  function AddHandlingFeeToRefund( ...

  3. jquery的ajax提交form表单方式总结

    方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderServic ...

  4. jquery实现ajax提交form表单的方法总结(转)

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement ...

  5. JS获取form表单数据

    以下代码可放在一个js文件中,以便通用: //获取指定表单中指定标签对象 function getElements(formId, label) { var form = document.getEl ...

  6. jquery使用ajax提交form表单

    $.ajax({ type: jqform.attr('method'), // 提交方式 get/post url: jqform.attr('action'), // 需要提交的 url data ...

  7. django ajax提交form表单数据

    后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...

  8. jquery的ajax提交form表单

    $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#yourformid').serialize(),// ...

  9. 【MVC】使用FormCollection获取Form表单数据

    public ActionResult Create(FormCollection form) { string name = form["name"]; //姓名 string ...

随机推荐

  1. 2020-07-07:mysql如何实现跨库join查询?

    福哥答案2020-07-07: 1.同服务跨库.表名称带上库名.SELECT * FROM 数据库名称1.表名称 JOIN 数据库名称2.表名称 ON 数据库名称1.表名称.tid = 数据库名称2. ...

  2. C#LeetCode刷题之#39-组合总和(Combination Sum)

    目录 问题 示例 分析 问题 该文章已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3663 访问. 给定一个无重复元素的数组 candi ...

  3. Css 设置超过再两行显示省略号

    大部分场景都是超过一行就显示... <template> <div class="other-product-item item-name" :title=&qu ...

  4. 极简 Node.js 入门 - 2.2 事件

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  5. matlab使用libsvm入门教程——使用matlab安装配置libsvm以及一个svm分类实例

    前言 此教程专注于刚入门的小白, 且博客拥有时效性, 发布于2019年3月份, 可能后面的读者会发现一些问题, 欢迎底下评论出现的问题,我将尽可能更新解决方案. 我开始也在如何安装libsvm上出现了 ...

  6. css中关于:nth-child()和:nth-of-type()的深入理解

    css中关于:nth-child()和:nth-of-type()的深入理解 在css中有这样一类属性,是以:nth-开头的,其中最常见的就是:nth-child() 和 :nth-of-type() ...

  7. Jmeter 常用函数(27)- 详解 __env

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 获取环境变量的值 语法格式 ${__e ...

  8. Spark on Yarn运行时加载的jar包

    spark on yarn运行时会加载的jar包有如下: spark-submit中指定的--jars $SPARK_HOME/jars下的jar包 yarn提供的jar包 spark-submit通 ...

  9. Tugnsten Fabric-MPLS-三层转发

    1.网络拓扑图如下: 2.场景:虚机1.1.1.3 ping 虚机3.3.3.3(两个虚机加入到虚拟路由器里面了,所以可以互通) 3.查看虚机1.1.1.3所对应的VRF: 4.其中41为mpls标签 ...

  10. 洛谷 P3951 NOIP 2017 小凯的疑惑

    洛谷 P3951 NOIP 2017 小凯的疑惑 题目描述 小凯手中有两种面值的金币,两种面值均为正整数且彼此互素.每种金币小凯都有 无数个.在不找零的情况下,仅凭这两种金币,有些物品他是无法准确支付 ...