java-jsp-spring中的ajax--post(亲测可用)

如果觉得写得可以或者太差就评论一下或者赞一下呗,多谢支持!!

1.需要的jar

<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160810</version>

</dependency>

2.jsp页面代码

<%@ page language="java"  pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户登陆</title>
<script src="js/jquery-1.7.1.min.js"></script>
    </head>
    <script type="text/javascript">

var xmlHttp;
function createXMLHttpRequest(){
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e) {
        // Internet Explorer
        try {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            try {
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
                alert("您的浏览器不支持AJAX！");
                return false;
            }
        }
    }
}
function btn_click() {
    //创建XMLHttpRequest对象
    createXMLHttpRequest();
    //获取值
    var username = document.getElementById("txt_username").value;
    var age = document.getElementById("txt_age").value;
    var param = "username=" + username + "&age=" + age;
    //配置XMLHttpRequest对象
    xmlHttp.open("post", "login.do",true);
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //设置回调函数
    xmlHttp.onreadystatechange = callBackMethod;
    //发送请求
    xmlHttp.send(param);
}
function callBackMethod(){
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {//http请求一切正常
            var result = xmlHttp.responseText;
            var map = eval('('+result+')');
            alert(map["msg"]);
            alert(map["user"].userName);
        } else {
            alert("请求失败！错误原因：" + XMLHttpReq.statusText);
        }
    } else {
        switch (xmlHttp.readyState) {
            case 0:
                alert("未初始化 还没有调用send()方法");
                break;
            case 1:
                alert("载入 已调用send()方法，正在发送请求");
                break;
            case 2:
                alert("（载入完成）send()方法执行完成，已经接收到全部响应内容");
                break;
            case 3:
                alert("（交互）正在解析响应内容");
                break;
        }
    }
}
</script>
<body>
    <label for="txt_username">姓名:</label>
    <input type="text" id="txt_username" />
    <br />
    <label for="txt_age">年龄:</label>
    <input type="text" id="txt_age" />
    <br />
    <input type="button" value="GET" id="btn" onclick="btn_click();" />
    <div id="result">
    </div>
</body>

3.后台controller 代码

import com.xlx.bean.User;
import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;


/**
 * Created by Administrator on 2017\9\4 0004.
 */
@Controller
public class loginController {
@ResponseBody
    @RequestMapping(value="login.do",method = RequestMethod.POST)
    public  String login(
            @RequestParam(value = "username")String name,
@RequestParam(value = "age")String age
){
    HashMap map = new HashMap();
    User user = new User();
    user.setUserName(name);
    if(name.equals("123")){
    map.put("msg","success");
    map.put("user",user);
}else{
    map.put("msg","fail");
}
    String jsonAllGoods = JSONObject.valueToString(map);
    return jsonAllGoods;
    }
}

java-jsp-spring中的ajax--post(亲测可用)

猜你喜欢