form表单ajax提交json数据

前端页面:

<form id="userInfo" >
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="username" name="username" type="text" pattern="[0-9]*" placeholder="请输入姓名">
            </div>
        </div>
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label class="weui-label">年龄</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="age" name="age" type="number" placeholder="请输入年龄">
            </div>
        </div>
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label class="weui-label">地址</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="address" name="address" type="text" placeholder="请输入地址">
            </div>
        </div>
        <div class="weui-btn-area">
            <a class="weui-btn weui-btn_primary" href="javascript:" id="saveUserInfo">确定</a>
        </div>
    </form>

ajax请求发送数据

 $("#saveUserInfo").click(function() {
        var formObject = {};
        var formArray =$("#userInfo").serializeArray();
        $.each(formArray,function(i,item){
            formObject[item.name] = item.value;
        });
        $.ajax({
            url:"user/addUser",
            type:"post",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(formObject),
            dataType: "json",
            success:function(data){
                alert(data.msg);
            },
            error:function(e){
                alert("错误!!");
            }
        });
    });
  • 6
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
AJAX(Asynchronous JavaScript and XML)是一种前端技术,允许在不重新加载整个网页的情况下,与服务器进行异步数据交换。当使用AJAX提交数据时,用户的操作(如点击按钮或选择项)可以在后台与服务器进行交互,而页面的其余部分仍保持可见,提供更好的用户体验。 以下是AJAX提交数据的基本步骤: 1. 创建XMLHttpRequest对象:这是与服务器通信的核心,JavaScript通过创建一个XMLHttpRequest实例来发起请求。 ```javascript var xhr = new XMLHttpRequest(); ``` 2. 设置请求方法和URL:通常用于POST方法发送数据。 ```javascript xhr.open('POST', '/submit-form', true); ``` 3. 配置请求头:如果需要发送JSON数据,可能需要设置`Content-Type`为`application/json`。 ```javascript xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); ``` 4. 发送请求并处理响应:使用`send()`方法发送数据,通常包含字段名和值的键值对。 ```javascript xhr.send(formData); ``` 5. 监听回调:定义一个`onreadystatechange`事件处理器,检查`readyState`属性,当状态变为4(示完成)且状态码为200(成功)时,处理服务器响应。 ```javascript xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 处理服务器返回的数据 console.log(xhr.responseText); } }; ``` 6. 错误处理:通常也需要检查`onerror`事件,以处理网络错误或服务器响应异常。 通过这种方式,用户无需刷新页面就能实时获取到服务器的反馈,提升了用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值