精华内容
下载资源
问答
  • 主要介绍了AJAX提交表单数据的方法,实例分析了Ajax调用的原理与实现技巧,需要的朋友可以参考下
  • 以下是Ajax 提交表单数据到入库的全盘操作流程,希望本文对广大php开发者有所帮助,感谢阅读本
  • Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值)。在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练“打字水平”的...
  • Ajax提交表单数据

    千次阅读 2017-05-21 22:03:48
    type: "post", //数据提交方式(post/get) url: "demo.php", //提交到的url data: {"key1":"value1","key2":"value2"},//提交数据 dataType: "json",//返回的数据类型格式 success: function(msg){

    ajax的基本语法

    $.ajax({
        type: "post",  //数据提交方式(post/get)
        url: "demo.php",  //提交到的url
        data: {"key1":"value1","key2":"value2"},//提交的数据
        dataType: "json",//返回的数据类型格式
        success: function(msg){
          //code...返回成功的回调函数
        },
        error:function(msg){
          //code...返回失败的回调函数
        }
    });

    html端:

    <!--要提交的表单-->
    <form method="post" action="demo.php" id="formid" >
        <input type="text" name="username" id="username"/>
        <button id="submit" type="submit">submit</button>
    </form>
    <!--局部更新的区域-->
    <div id="display"></div>

    php服务端代码demo.php:

    <?php
    $username = $_POST['username'];
    $data = "{username:'$username'}";//组合成json格式数据
    echo json_encode($data);//返回json格式数据
    ?>

    html端的script代码:

    <script>
        $(document).ready(function(){
            $("#submit").click(function(e){
                e.preventDefault();//阻止默认的表单提交
                username = $("#username").val();//获取表单的输入值
                $.ajax({
                    type:"POST",
                    url:"demo.php",
                    data:{"username":username},//提交到demo.php的数据
                    dataType:"json",//回调函数接收数据的格式
                    success:function(msg){
                        $("#display").empty();//清空
                        data = eval("("+msg+")");//将返回的json解析成json对象
                        $("#display").html("hello: "+data.username);
                        console.log(msg);
                        console.log(data);
                    },
                    error:function(msg){
                        console.log("request fail:"+msg);
                    }
                });
            });
        });
    </script>

    结果:
    这里写图片描述

    控制台console显示的结果:
    这里写图片描述
    只有转成json对象格式才能才能用.value的形式获取

    改进,让php直接返回json对象就无需转换
    json_encode()函数能够把数组直接转成json对象
    所以,php后端代码改写为:

    <?php
    echo json_encode($_POST);//返回json对象格式数据
    ?>

    html端ajax代码修改为:

    $.ajax({
        type:"POST",
        url:"demo.php",
        data:{"username":username},//提交到demo.php的数据
        dataType:"json",//回调函数接收数据的格式
        success:function(msg){
            $("#display").empty();//清空
            $("#display").html("hello: "+msg.username);
            console.log(msg);
        },
        error:function(msg){
            console.log("request fail:"+msg);
        }
    });

    这样php后端一句代码搞定,不用自己去构造返回数据的json格式,而且script也不用把json字符串格式转成json对象
    再看一下控制台的输出信息:
    这里写图片描述


    虽然不用再去构造返回数据的json格式,但是ajax请求时发送的表单数据也还要自己去构造。想一想,如果表单数据有一万个输入值,那么自己去构造的话。。。。
    解决方法很简单:只需改变$.ajax()内的data:值就行了

    data:$('#formid').serialize(),//你的表单id
    //或者
    data:$('#formid').serializeArray()

    用控制台看看这两者的区别(为了更直观,我又加了一个input元素):
    这里写图片描述
    可以看到.serialize()将表单要提交的内容序列化成一个类似URL的字符串格式,而.serializeArray()则将表单内容序列化为一个json对象的结构


    注意:php用includerequire引入前端页面时,两者是在同一个运行代码里,即都是属于主线程的。这时若用该前端页面去ajax请求该php后端脚本代码,会导致请求失败。


    参考资料:

    展开全文
  • Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值)。在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练“打字水平”的...
  • JS:AJAX提交表单数据

    千次阅读 2018-11-01 15:51:17
    方法一、通过对象传递参数,后天通过对象的属性获取值 ... $.ajax({ type: &amp;amp;quot;POST&amp;amp;quot;, url:&amp;amp;quot;/manage/admin/addOrUpdate&amp;amp;quot;, data:{ id:$

    方法一、前台通过对象传递参数,后台通过对象的属性获取值

    jsp代码:

       $.ajax({
                type: "POST",
                url:"/manage/admin/addOrUpdate",
                data:{
                    id:$("#id").val(),
                    passwordOld:$("#passwordOld").val(),
                    passwordNew:$("#passwordNew").val(),
                },
                dataType:"json",
                success: function(data) {
                    if(data.res == 1){
                        $("#info").text("保存成功!");
                        $("#info").attr("class","text-success");
                        $('#myModal').modal('show');
                        reset();
                    }else{
                        $("#info").text("保存失败!");
                        $("#info").attr("class","text-danger");
                        $('#myModal').modal('show');
                    }
                }
            });
    

    controller代码:

       /**
         * 添加或修改
         * @param adminVo
         * @return
         */
        @RequestMapping(value = "addOrUpdate", method = RequestMethod.POST)
        @ResponseBody
        public AjaxRes addOrUpdate(SysAdminVo adminVo) {
            AjaxRes ar = getAjaxRes();
            try {
                if(adminVo.getId() == null){// 新增
                    adminVo.setPassword(MD5.md5(adminVo.getPassword()));
                    sysAdminService.insert(adminVo);
                    ar.setRes(1);
                }else{//修改
                    SysAdminVo  sysAdminFind = sysAdminService.findById(adminVo);
                    if(sysAdminFind == null){
                        ar.setFailMsg("用户名或密码错误");
                        return ar;
                    }else{
                        adminVo.setPassword(MD5.md5(adminVo.getPassword()));
                        sysAdminService.update(adminVo);
                        ar.setRes(1);
                    }
                }
            } catch (Exception e) {
                logger.error(e.toString(), e);
            }
            return ar;
        }
    

    方法二、前台通过form提交数据,后台通过request获取参数值

    jsp代码:

                    var formData = new FormData($('#validation-form')[0]);
                    $.ajax({
                        type: "POST",
                        url:"/manage/order/addOrder",
                        data: formData,
                        contentType: false,
                        processData: false,
                        dataType:"json",
                        success: function(data) {
                            if(data.res == 1){
                                $("#info").text("保存成功!");
                                $("#info").attr("class","text-success");
                                $('#myModal').modal('show');
                                reset();
                                window.location.href="/manage/order/list";
                            }else{
                                $("#info").text("保存失败!");
                                $("#info").attr("class","text-danger");
                                $('#myModal').modal('show');
                            }
                        }
                    });
    

    controller代码:

        /**
         * 新增手工订单
         *
         * @param
         * @return
         */
        @RequestMapping(value = "addOrder")
        @ResponseBody
        public AjaxRes addOrder(HttpServletRequest request) {
            AjaxRes ar = getAjaxRes();
            Long  userId = 1L;
            DdOrderVo ddOrderVo = new DdOrderVo();
            ddOrderVo.setOrderType(2);
            Long mainorderNum = this.getOrdercode(userId);
            Long orderNum = this.getOrdercode(userId);
            DdGoodsVo ddGoodsVo = new DdGoodsVo();
            try{
                String goodsid = request.getParameter("ddGoodList");
                ddGoodsVo.setId(Long.parseLong(goodsid));
                DdGoodsVo dd_find  = ddGoodsService.findById(ddGoodsVo);
                //根据商品名称获得商品id
                DdOrderGoodsVo orderGoodsVo = new DdOrderGoodsVo();
                orderGoodsVo.setGoodsName(dd_find.getName());
                orderGoodsVo.setGoodsId(dd_find != null ? dd_find.getId() : 0);
                orderGoodsVo.setGoodsNum(1);
                orderGoodsVo.setGoodsState(Short.parseShort("5"));
                orderGoodsVo.setUserId(userId);
                orderGoodsVo.setOrderNum(orderNum);
                ddOrderGoodsService.insert(orderGoodsVo);
                //生成订单
                ddOrderVo = new DdOrderVo();
                ddOrderVo.setMainorderNum(mainorderNum);
                ddOrderVo.setOrderNum(orderNum);
                ddOrderVo.setOrderState(1);
                ddOrderVo.setOrderType(2);
                ddOrderVo.setOrderTime(DateUtil.getTimestamp());
                ddOrderVo.setUserId(userId);
                ddOrderVo.setBuyerMessag(request.getParameter("buyerMessag"));
                ddOrderService.insert(ddOrderVo);
                //生成订单发货地址/
                SysAddressVo sysAddressVo = new SysAddressVo();
                sysAddressVo.setUserid(ddOrderVo.getId());
                sysAddressVo.setAddressee(request.getParameter("uname"));
                sysAddressVo.setPhone(request.getParameter("phone"));
                sysAddressVo.setProvince(request.getParameter("province"));
                sysAddressVo.setCity(request.getParameter("city"));
                sysAddressVo.setDistrict(request.getParameter("district"));
                sysAddressVo.setAddress(request.getParameter("address"));
                sysAddressService.insert(sysAddressVo);
                ar.setRes(1);
            }catch (Exception e){
                e.printStackTrace();
            }
            return ar;
        }
    
    
    展开全文
  • 表单示例: <form class="needs-validation tab-pane fade show active" autocomplete="off" novalidate="" id="signin-tab" name="loginform" method="post"> {% csrf_token %} <div class="form-...

    表单示例:

    <form class="needs-validation tab-pane fade show active" autocomplete="off" novalidate=""
                          id="signin-tab" name="loginform" method="post">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="id_uname">账号</label>
                            <input class="form-control" name="uname" id="id_uname" type="text"
                                   placeholder="输入4-12位英文数字账户" pattern="[a-z0-9A-Z]{4,12}"
                                   required>
                            <div class="invalid-feedback">请输入一个有效的账号.</div>
                        </div>
                        <div class="form-group">
                            <label for="si-password">密码</label>
                            <div class="password-toggle">
                                <input class="form-control" name="pwd" type="password" id="si-password"
                                       pattern="[a-z0-9A-Z]{6,12}" required="">
                                <label class="password-toggle-btn">
                                    <input class="custom-control-input" type="checkbox"><i
                                        class="czi-eye password-toggle-indicator"></i><span
                                        class="sr-only">显示密码</span>
                                </label>
                                <div class="invalid-feedback">请输入6-12位英文数字密码.</div>
                            </div>
                        </div>
                        <div class="form-group d-flex flex-wrap justify-content-between">
                            <div class="custom-control custom-checkbox mb-2">
                                <input class="custom-control-input" type="checkbox" id="si-remember">
                                <label class="custom-control-label" for="si-remember">记住我</label>
                            </div>
                            <a class="font-size-sm" href="#">忘记密码?</a>
                        </div>
                        <button class="btn btn-primary btn-block btn-shadow" type="submit" >立即登录</button>
                    </form>

    javascript脚本

    <script>
        function logins() {
            var bootstrapValidator = $("[name='loginform']").data('bootstrapValidator');
            bootstrapValidator.validate();
            if (bootstrapValidator.isValid())
                $.ajax({
                    type: "post",   //方法类型
                    url: "/user/login/",
                    data: $("[name='loginform']").serialize(),
                    success: function(data){
                        
                    }
                });
            else return;
        }
    </script>

     

    无刷新解决办法

    <script>
        $('#signin-tab').submit(function (e) {
            if (e.isDefaultPrevented()) return
            //  PROCESS DATA ...
            $.ajax({
                type: "post",   //方法类型
                url: "/user/login/",
                data: $("[name='loginform']").serialize(),
                dataType: 'json',
                success: function(data){
                    if (data=='1'){
                        window.location.reload();
                    } else {
                        $("#tsinfo").text('用户名密码错误');
                        setTimeout(function() { $("#tsinfo").hide(); }, 3000);
                    }
                }
            });
            return false;//阻止页面刷新
        })
    </script>

     

    展开全文
  • Ajax提交表单数据的几种方式

    万次阅读 2017-10-11 15:01:28
    总结一下Ajax提交表单数据的几种方式第一种方式 1.手工填写表单数据 2.使用serialize( )函数提交 3.使用jquery Form插件提供的ajaxSubmit()函数

    总结一下Ajax提交表单数据的几种方式

    第一种方式:手工填写所有表单数据

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
        <script type="text/javascript">
            $(function(){
    
                $.ajax({
                    url:'xxxx',
                    type:'post',
                    dataType:'json',
                    data:{
                        'p1':$('#p1'),
                        'p2':$('#p2')
                    },
                    success:function(result){
                        //回调函数
                    }
    
                });
    
    
            });
        </script>
    </head>
    <body>
        <form id="myForm" action="">
            <input id="p1" name="p1" value="p1"/>
            <input id="p2" name="p2" value="p2"/>
            <input id="btn" type="button" value="提交"/>
        </form>
    </body>
    </html>

    第二种方式:$(‘#myform’).serialize( );

    注意:这时表单的按钮的type不可以是submit,否则自提交数据,也就是自动刷新;
    当时做的一个功能是: 在数据列表的第二页点击一条数据修改,修改成功后,显示修改成功,页面还要停留在第二页,不能回到第一页,所以就不能刷新网页,不然就回到第一页了;而用Ajax的serialize()提交表单,如果input的type为submit,提交时就会自动刷新,回到第一页,所以,用serialize()提交表单的时候最好把type改为button

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
        <script type="text/javascript">
            $(function(){
    
                $.ajax({
                    url:'xxxx',
                    type:'post',
                    dataType:'json',
                    data:$("#myForm").serialize(),
                    success:function(result){
                        //回调函数 
                    }
                });
    
    
            });
        </script>
    </head>
    <body>
        <form id="myForm" action="">
            <input id="p1" name="p1" value="p1"/>
            <input id="p2" name="p2" value="p2"/>
            <input id="btn" type="button" value="提交"/>
        </form>
    </body>
    </html>

    第三种方式:使用jQuery Form插件提供的ajaxSubmit()函数
    没怎么使用过,在网上找了一下代码,估计需要引用一下js文件

    $('#myform').ajaxSubmit({
    type: 'GET/POST',
    url: 'xx.php',
    dataType: 'json',
    success: fn,
    clearForm: true,
    resetForm: true
    });  
    //此函数会自动把选定的表单进行序列化并异步提交
    展开全文
  • ajax异步提交表单

    2017-07-20 09:00:53
    ajax提交的jq版本,相当实用
  • 主要为大家详细介绍了jQuery通过ajax快速批量提交表单数据的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 参考链接:... 注意设置ajax的content-type为application/x-www-form-urlencoded 这里是form表单提交,改了这个后台直接就用对象接收就可以了 function ajaxAction(){ $.ajax({ ...
  • 今天给大家带来的技术就是ajax提交表单 优点是不刷新页面,不跳转页面,静默提交的。 至于什么是ajax,自己去百度了解。 首先我们得要有一个表单提交页面: index.html 这个页面由两个部分组成 1、表单控件 2、...
  • jQuery ajax 提交表单数据的方法

    千次阅读 2017-05-09 14:08:44
    jQuery ajax中数据以键值对(Key/Value)的形式发送到服务器,使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对(key1=value1&key2=value2…)后提交。 serialize() 方法使用...
  • ajax提交表单数据,并根据返回的数据进行相关处理的代码直接上代码 $(function(){ $("#sendtemp").click(function(){ $.ajax({ type:'POST', data:{ 'keyword1':$('
  • 摘要: js封装from表单数据为json串进行ajax提交 json封装代码 function getFormJson(frm) { //frm:form表单的id var o = {}; var a = $("#"+frm).serializeArray(); $.each(a, function() { if (o[this.name]...
  • 利用ajax提交form表单数据

    千次阅读 2020-02-03 16:53:16
    利用thymeleaf引擎创建的html中,使用了adminLTE模板,ajax提交form表单数据,本以为很容易实现,却遇到了很多问题,这里进行总结。 1.get方式提交 通过serialize()序列化出来的是userId=11&userName=11这样...
  • 最近一段时间开始自学layui前端框架下,表单提交数据到后端的方法。前端采用h5,layui,jquery,后端采用ssm框架,现在直接上代码前端表单页面代码(核心部分):&lt;body&gt; &lt;section class="...
  • Ajax异步提交表单数据的说明及方法实例,需要的朋友可以参考一下
  • ajax提交Form表单数据到后台

    千次阅读 2019-01-26 23:52:17
    先引入jQuery。 &lt;script type="text/javascript"...这一段是提交数据到后台的JS代码。 &lt;script type="text/javascript"&gt; function login() { $.ajax({ ..
  • 使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的...一、不带文件的ajax提交数据: html:form表单 <form id="addForm" action="${pageContext.reques
  • 使用ajax提交表单数据,整个jsp页面却会重新加载、刷新,而不是局部刷新 问题描述 昨天用ajax写异步,在插入数据时(点击button),提交表单后,整个jsp页面总是会自动刷新一遍。 但是异步就是要局部刷新,而不是...
  • 该演示需要用到 1 : json.jar(下载)  2 : jquery.js(下载) 流程演示:1.点击“登录”按钮,传参到后台  2.后台获取数据,处理分析数据,利用JSONObject返回结果(JSONObject需要用到一个 json.jar 即可)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 78,970
精华内容 31,588
关键字:

ajax提交表单数据