精华内容
下载资源
问答
  • jquery的ajax获取form表单数据

    千次阅读 2019-10-09 09:02:10
    jq是对dom进行的再次封装。是一个js库,极大简化了js使用 jquery库在js文件中,...html页面代码如下,有一个form表单,id是login_value.填写内容后请求接口 <form id="login_value"> <div> <labe...

    jq是对dom进行的再次封装。是一个js库,极大简化了js使用
    jquery库在js文件中,包含了所有jquery函数,引用:
    这里主要介绍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>
    
    
    
    展开全文
  • JS获取form表单提交的数据提交(ajax) 在html页面不想用form表单提交,但是表单数据是遍历出来的,所以可以用这个方法获取遍历的form表单点击要提交的的数据,废话不多说直接上代码 代码部分 //这是我用PHP写的 <!...

    JS获取form表单提交的数据(ajax获取表单提交数据进行请求)

    开发说明

    这次用原生的php和js开发增删改查的功能,数据是用php遍历的,数据修改有用form表单和ajax去请求,一个页面要修改和删除的请求(数据是遍历的)!修改是用表单提交的,重置密码和删除是用jq获取表单提交的内容,在用ajax提交到php处理数据

    在这里插入图片描述

    代码

    //php遍历数据
    <body>
    <div  style="margin:0 auto;width:100%">
    <div class="col-md-6" style="margin:0 auto;width:100%">
        <table class="table table-hover table-striped" style="margin:0 auto;width:800px" >
            <tr >
                <td colspan="6"><h6><a href="index.php">回首页</a></h6><h1 class="text-center">用户管理</h1></td>
            </tr>
            <tr>
                <td colspan="6"><h4><a href="add.php">新增用户</a></h4></td>
            </tr>
            <tr >
                <td>id</td>
                <td>用户名</td>
                <td>注册时间</td>
                <td>过期时间</td>
                <td>操作</td>
            </tr>
           
            <?php 
                foreach($userlist as $list){
                    echo '<form class="form-inline" action="update.php"  method="post" >';
                    echo  "<input type='text' style='display:none;' name='id' value=".$list['id'].">";
                    echo ' <tr><td>'.$list['id'].'</td>';
                    echo '<td>'.$list['username'].'</td>';
                    echo '<td>'.date("Y-m-d",$list['createtime']).'</td>';
                    echo '<td>'.date("Y-m-d",$list['createtime']+$list['indate']*86400).'</td>';
                    echo '<td><button type="submit"  class="btn btn-info">修改</button></form>';
                    echo '<form class="form-inline" action=""  οnclick="return deleteFn(this)">';
                    echo  "<input type='text' style='display:none;' name='id' value=".$list['id'].">";
                    echo '<button type="button" class="btn btn-danger deletebt" οnclick="return deleteFn(this)">删除</button></tr></td></form>';
                    
                }
            
            ?>
            
                                    
        </table>
    </div>
    </div>
    
    </body>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.5.1.js"></script>
    <script type="text/javascript" >
    
        function deleteFn(form){
    			let formData = new FormData(form);
    			let id = formData.get('id');
                console.log(id);
                var con;
                con=confirm("确定要删除该用户吗?");
                if(con==true){
                    $.ajax({
                    url: 'delete.php',
                    type:'POST',
                    data:{id:id},
                    success:function(result){
                        console.log(result);
                        location.reload()
                    }
                });
                }
    		}
    </script>
    </html>
    
    展开全文
  • 大家应该都知道,在静态页面提交表单到数据库很简单就是单纯的 <... </form> 这个缺点是会刷新页面,会跳转...jQuery脚本会获取form表单数据,通过post的方式提交给api.php <!DOCTYPE HTML PUBLIC "-//W
  • Ajax获取form表单提交数据

    千次阅读 2017-05-15 17:00:18
    ajax ({ var str_data = $ ('# _form input '). map ( function (){ return ( $ ( this ). attr ( 'name' )+ "=" + $ ( this ). val ()); }).g et (). join ('&'); type: 'post' , url: 'url' ,...
    <!DOCTYPE html >
    < html lang= "en" >
    < head >
    < meta charset= "UTF-8" >
    < meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
    < meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
    < title >Document </ title >
    < script src= "jquery-1.11.1.min.js" ></ script >
    </ head >
    < body >
    < form id= "_form" method= "post" >
    < div class= "fitem" >
    < label > 房间: </ label >
    < input name= "fangjian" style= "padding: 2px; width: 135px; border: 1px solid #A4BED4;" required />
    </ div >
    < div class= "fitem" >
    < label > 建筑: </ label >
    < input name= "jianzhu" class= "easyui-combobox" style= "padding: 2px; width: 141px; " required />
    </ div >
    < div class= "fitem" >
    < label > 部门: </ label >
    < input name= "bumen" class= "easyui-combobox" style= "padding: 2px; width: 141px; " required />
    </ div >
    </ form >

    < script >
    $( function(){
    /*var str_data = $('#_form input').map(function(){
    return ($(this).attr('name')+'='+$(this).val());
    }).get().join('&');
    alert(str_data);
    */
    $. ajax({
    var str_data = $('# _form input'). map( function(){
    return ( $( this). attr( 'name')+ "="+ $( this). val());
    }).g et(). join('&');
    type: 'post',
    url: 'url',
    data:str_data,
    success: function( msg){
    // do something...
    }
    })
    })
    </ script >
    </ body >
    </ html >
    展开全文
  • ajax如何获取form数据

    千次阅读 2020-04-03 15:42:08
    ajax异步处理数据时,获取表单数据的方法 1、$("form").serialize(); //生成字符串 serialize()方法是通过序列化表单的值,创建URL编码文本字符串(即形成GET传值得方式) <form> <div><input ...

    ajax异步处理数据时,获取表单中数据的方法

    1、$("form").serialize(); //生成字符串

    serialize()方法是通过序列化表单的值,创建URL编码文本字符串(即形成GET传值得方式)

    <form>
      <div><input type="text" name="a" value="1" id="a" /></div>
      <div>
        <textarea name="b" rows="1" cols="40">1</textarea>
      </div>
      <div><select name="c">
        <option value="2" selected="selected">2</option>
        <option value="3">6</option>
        <option value="4">7</option>
      </select></div>
      <div>
        <input type="checkbox" name="d" value="5" id="f" />
      </div>
      <div>
        <input type="submit" value="Submit"  name='e'/> //不包含
      </div>
    </form>

    输出结果为:a=1&b=1&c=2&d=5

    2、$("form").serializeArray() //返回的是JSON数据结构数据

    注意:该方法返回的是JSON对象而非JSON字符串

    [

       {

             name :a

             value:1

         },{

             name :b

             value:1

         },{

             name :c

             value:1

         },

    {

             name :a

             value:2

         },{

             name :d

             value:5

         },

    ]

     

     

    展开全文
  • 主要介绍了Yii2基于Ajax自动获取表单数据的方法,涉及Yii结合ajax调用鼠标事件动态查询表单的相关技巧,需要的朋友可以参考下
  • js获取form表单

    2017-07-11 12:06:43
    ajax js一次性获取form表单
  • 获取标签后调用serialize()方法。
  • Ajax提交Form表单以及后端取值(java) 1、ajax提交form表单: <script> function denglu(){ ... //方法1:将form表单数据序列化 data : $('#one').serialize(), //方法2:传送json数据 ...
  • 使用方式 $("#regBtn"... //封好的提交方法(1,form表单id,)  ajaxgoform($("#form"),"{:url('reg/reuser')}",function(data){  if(data.code==200){  console.lo...
  • ajax提交Form表单数据到后台

    千次阅读 2019-01-26 23:52:17
    先引入jQuery。 &lt;script type="text/javascript"...这一段是提交数据到后台的JS代码。 &lt;script type="text/javascript"&gt; function login() { $.ajax({ ..
  • 主要介绍了TinyMCE提交AjaxForm获取不到数据的解决方法,实例分析了对应的源码部分与相应的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下
  • vue 使用ajax传输form表单数据

    千次阅读 2019-10-11 13:16:26
    因为要上传文件,所以选择ajax的方式。后台的最低阅读时间是xxs,但是el-time-picker获得的值,其格式是 HH:mm:ss(这里我屏蔽了年月日)。现在我需要把日期转化格式后再通过form传到后台。 <div> <label...
  • ajax form数据封装,ajax提交整个form表单,ajax 自动获取当前form数据 //form数据封装 function formToString(formObj){ var allStr=""; if(formObj){ var elementsObj=formObj.elements; var obj; if...
  • 通过ajax提交form表单数据的几种方式

    千次阅读 2020-01-11 18:39:13
    模拟HTML表单,相当于将HTML表单映射成表单对象,自动将表单对象中的数据拼接成请求参数的格式。 异步上传二进制文件 使用 在原生ajax中的使用 <form id="form"> <input type="text" name="username...
  • 版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 ...———————————————— 前端页面: ...form id="userInfo" > <div class="weui-cell"...
  • jquery.js + jquery-form.js + springMVC实现ajax提交form表单和上传图片,上传图片成功js可以获取图片保存相对路径。
  • 获取Form表单数据

    千次阅读 2018-08-06 12:05:58
    form class="layui-form" id="frm" style="width:100%;"&gt; &lt;input type="text" name="nn" /&gt; &lt;table&gt; &lt;tbody id=&...
  • 获取form表单数据

    万次阅读 多人点赞 2019-06-09 16:14:39
    当我们提交form表单数据时,我们可以在form表单内使用action 属性来提交表单,也可以使用jQuery插件中的 ajax方式提交,或者使用post提交等等。现在我要实现的功能是首先要判断form表单里面的多个数据,如果数据符合...
  • jquery获取form表单数据

    千次阅读 2020-01-31 18:55:57
    <script> $("#submitadd").click(function... //serialize()函数将来自表单数据转码了,所以需要解码才能显示正常数据 var title =decodeURIComponent($("#title").serialize()); //获取ckeditor的内容 ...
  • jQuery中ajaxform表单方式提交数据

    千次阅读 2019-08-16 13:12:10
    表单加ID值,如图: 写ajax方法,如图: servlet返回是否添加成功,如图: jsp页面 <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" ...
  • 我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单...1.ajaxForm 增加所有需要的事件监听器
  • ajax获得表单值的俩种方法

    万次阅读 2018-06-23 17:12:02
    FormData 介绍 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。 在使用ajax提交时,使用FormData对象可以减少拼接queryString的工作量...form表单添加 enctype=&amp;quot;m...
  • 源码包括: 1、django的原生Form表单数据验证。 2、Ajax方式的Form表单数据验证
  • [Laravel] 实现ajax请求form表单post请求

    千次阅读 2018-06-27 14:21:04
    注意 : Html页面(laravel表单提交必须token)所以除了检查 POST 参数中的 CSRF token 外,VerifyCsrfToken 中间件还会检查 X-CSRF-TOKEN 请求头。你可以将令牌保存在 HTML meta 标签中。 HTML: &lt;meta name...
  • ajax异步提交表单

    2017-07-20 09:00:53
    ajax提交的jq版本,相当实用
  • ajax实现form表单提交

    万次阅读 2017-12-29 10:32:04
    昨天在做 ajax 申请链接提交表单的时候,发现提交了两次,Debug 的时候,也能发现控制器会执行两次。当然,数据库里也是两条数据。然后今天起来,修改了一下,结果出现了中文乱码情况,原因是多次解码,这里大家可以...
  • 有便利表单中的所有input的和直接序列化form表单两种 序列化(图片来源于网络) 获取标签(图片来源于网络) 还有一种 是直接用Formdata来处理 FormData可以很方便地获取到表单中的所有数据。 注意: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 96,390
精华内容 38,556
关键字:

ajax获取form表单数据