JavaScript--------JQuery---------Ajax提交数据-优快云博客

本文详细介绍了如何在前后端分离的架构下实现密码修改功能，从前台页面设计到后端处理逻辑，再到Ajax数据提交及响应处理，全面解析了密码修改流程的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、前台页面

<form >
    <ul>
        <li><label><font color="#ff0000">* </font>请输入旧密码：<input type="text" name="oldPassword" id="oldPassword" required value="" class="ipt" /></label></li>
        <li><label><font color="#ff0000">* </font>请输入新密码：<input type="text" name="newPassword" id="newPassword" required value="" class="ipt" /></label></li>
        <li><label><font color="#ff0000">* </font>请重复新密码：<input type="text" name="reNewPassword" id="reNewPassword" required value="" class="ipt" /></label></li>
        <li><input onclick="Login.initSubmit('${user.name}');"  value="确认提交" type="submit" /></li>
        <li><input type="button" onclick="Login.initSubmit('${user.name}')"></li>
    </ul>
</form>

<th:block th:replace="js/login_js"></th:block>

2.js/login_js文件中的Login.initSubmit...

<script type="text/javascript">
    var Login = function () {
        return {
            init: function () {
                this.initEvent();
            },
            initEvent: function () {
                alert("hello!");
            },

            initSubmit: function ajax_submit(username) {

                var oldPassword = $("#oldPassword").val();//获取表单的输入值;
                var newPassword = $("#newPassword").val();//获取表单的输入值;
                var repeatPassword = $("#reNewPassword").val();
                $.ajax({
                    async: false,
                    type: "post",  //数据提交方式（post/get）
                    url: "/editPassword",  //提交到的url
                    contentType : "application/x-www-form-urlencoded; charset=utf-8",
                    data: {"username": username, "oldPassword": oldPassword, "newPassword": newPassword},//提交的数据
                    dataType: "text",//返回的数据类型格式
                    success: function (msg) {
                        alert(msg.toString());

                        if (msg == "msgs") {  //修改成功
                            //修改成功处理代码...
                            alert("修改成功")

                        } else {  //修改失败
                            //修改失败处理代码...
                            alert("修改失败")
                        }
                    }
                });
            }

        };
    }();
    $(document).ready(function () {
        Login.init();
    });
</script>

3.后台处理代码 Controller中的 /editPassword这个地址

package com.zpark.neimin.thymeleaftest.controller;

import com.zpark.neimin.thymeleaftest.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;

/**
 * 用Thymeleaf 模板引擎：把index.html这样的前台页面放在templates这个路径下
 */
@Controller
public class IndexController {
    @RequestMapping("/")
    public String testModel(Model model) {
        model.addAttribute("message","helloMessage");
        model.addAttribute("name","<span style='color:red'>lucas</span>");
        User user = new User();
        user.setAge(20);
        user.setName("lucas");
        model.addAttribute("user", user);
        return "index";
    }

    @RequestMapping("/editPassword")
    @ResponseBody
    public String editPassword(HttpServletRequest request) {
        String oldPassword = request.getParameter("oldPassword");
        System.out.println("...........editPass.oldPassword:....." + oldPassword);

        return "msg";
    }
}

@Controller + @ResposeBody = @RestController

@ResposeBody 注解修饰的方法，返回的值会传递出去

@Controller注解修饰的方法，返回这个值为名字的页面（view）

HttpServletRequest： Servlet中的Request参数

提交Json数据：

$('#' + param.formId)
                    .submit(function(){
                        // alert("..............");
                        // return;
                        // param.submitHandler(param.submitParam);

                        var list = {"name":"lucas","age":30};
                        $.ajax({
                            //请求方式
                            type : "POST",
                            //请求的媒体类型
                            contentType: "application/json;charset=UTF-8",
                            //请求地址
                            url : "/login.json",
                            //数据，json字符串
                            data : JSON.stringify(list),
                            //请求成功
                            success : function(result) {
                                console.log(result);
                                alert(result);
                            },
                            //请求失败，包含具体的错误信息
                            error : function(e){
                                console.log(e.status);
                                console.log(e.responseText);
                                alert(e.status)
                            }
                        });

                    });

说明：

list中数据格式： var list = {"name":"lucas","age":30};

contentType: "application/json;charset=UTF-8"

在Controller中接受Json数据

@RequestMapping("/login.json")
    @ResponseBody
    public Map editPassword(@RequestBody Map<String,Object> loginData) {
        System.out.println("................./login.json,name:" + loginData.get("name"));
        HashMap<String, Object> rs = new HashMap<>();
        return rs;
    }

说明：

通过注解@RequestBody接收参数

接收json数据需要用Map也可以是实体类

从Controller中往回调函数中回复数据也可以是这两种方式（map/bean）

实体类的情况：

BaseResult

package com.zpark.neimin.first.common;

public class BaseResult {

    private boolean isSuccess;

    public boolean isSuccess() {
        return isSuccess;
    }

    public void setSuccess(boolean success) {
        isSuccess = success;
    }

    @Override
    public String toString() {
        return "BaseResult{" +
                "isSuccess=" + isSuccess +
                '}';
    }
}

Controller

@RequestMapping("/login.json")
    @ResponseBody
    public BaseResult recieveDate(@RequestBody Map<String, Object> loginData) {
//        Map<String, Object> map = new HashMap<>();
//        String loginName = loginData.get("loginName").toString();
//        System.out.println(".......controller");
//        return map;

        BaseResult baseResult = new BaseResult();
        String loginName = loginData.get("loginName").toString();
        if (loginName != null) {
            baseResult.setSuccess(false);
        }
        return baseResult;
    }

Ajax：

$.ajax({
                    url:"/login.json",
                    contentType: "application/json;charset=UTF-8",
                    type: "post",
                    data: JSON.stringify(param),

                    success: function (resp) {

                        if(resp.success) {
                            alert(".....提交成功" + resp.toString());
                        }

                        location.href="/index.html"
                    }
                });