首页 » JavaScript » SpringMVC+Maven框架(4)ajax请求

SpringMVC+Maven框架(4)ajax请求

原文 http://blog.csdn.net/qq_28934205/article/details/79064332

2018-01-16 02:00:20阅读(299)

SpringMVC+Maven<a href=框架(4)ajax请求" src="http://img.blog.csdn.net/20180115141921652?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjg5MzQyMDU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述" title="">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欢迎登录后台管理系统</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/jquery.js"></script>
<script src="js/cloud.js" type="text/javascript"></script>
<script language="javascript">
    $(function(){
    $('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2});
    $(window).resize(function(){  
    $('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2});
    })  
});  
</script> 
</head>
<body>
    <div id="mainBody">
      <div id="cloud1" class="cloud"></div>
      <div id="cloud2" class="cloud"></div>
    </div>  
<div class="logintop">    
    <span>欢迎登录后台管理界面平台</span>    
    <ul>
    <li><a href="#">回首页</a></li>
    <li><a href="#">帮助</a></li>
    <li><a href="#">关于</a></li>
    </ul>    
    </div>
    <div class="loginbody">
    <span class="systemlogo"></span> 
    <div class="loginbox">
    <ul>
    <li><input name="" type="text" class="loginuser" id="inputLoginCode" value="admin" onclick="JavaScript:this.value=''"/></li>
    <li><input name="" type="text" class="loginpwd" id="inputPassword" value="密码" onclick="JavaScript:this.value=''"/></li>
    <li><input name="" type="button" class="loginbtn" id="login" value="登录"  />
        <label><input name="" type="checkbox" value="" checked="checked" />记住密码</label>
        <label><a href="#">忘记密码?</a></label></li>
    </ul>
    </div>
    </div>
    <div class="loginbm">版权所有  2014  <a href="http://www.uimaker.com">uimaker.com</a>  仅供学习交流,勿用于任何商业用途</div>
    <script type="text/javascript" src="js/login.js"></script>
</body>
</html>

SpringMVC+Maven框架(4)ajax请求

/**
 * 
 */
$(function() {
    $("#login").click(function() {
        var loginname = $("#inputLoginCode").val();
        var userpws = $("#inputPassword").val();
        var postData = {
            "loginName" : loginname,
            "userPws" : userpws
        }
        // alert("用户:"+postData.loginName);
        $.ajax({
            url : 'singin',
            type : 'get',
            data : postData,
            dataType : "json",
            success : function(data) {
                alert("true----" + data);
            },
            error : function(xhr, status, error) {
                alert("error---" + xhr.readyState);
                // 0 - (未初始化)还没有调用send()方法
                // 1 - (载入)已调用send()方法,正在发送请求
                // 2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
                // 3 - (交互)正在解析响应内容
                // 4 - (完成)响应内容解析完成,可以在客户端调用了
            }
        });
    });
});

出现任何错误都会跳到error函数里

举例说明一些错误原因:

dataType错误

类型错误:后台返回的dataType类型和前台写的不一致会跳入error

格式错误:jquery1.4之后对json的格式要求非常严格,json格式错误也会跳入error.{“test”:1} 注意格式

有时,在不需要返回值的情况下,扔按模板格式,设置了dataType:”json”,参数;这时候,ajax传值正确时,出现200返回成功状态下报错的特殊情况。

async请求同步异步问题

async默认是true(异步请求),如果想一个Ajax执行完后再执行另一个Ajax, 需要把async=false

例如,你用post请求传值到另一个页面后台,但是页面一加载你的ajax就已经执行过了,传值接收是在后台才完成的,这时候就请求不到数据,所以可以考虑把ajax请求改为同步试试。

data不能不写

data为空也一定要传”{}”;不然返回的是xml格式的。并提示parsererror. data:”{}”

parsererror的异常和Header 类型也有关系。及编码header(‘Content-type: text/html; charset=utf8’);

传递的参数

必须是ajax支持的编码格式

URL路径问题

路径不能有中文

用error调试错误信息:

可以alert出来,查看具体是哪里出错了

具体参数:

XMLHttpRequest:XMLHttpRequest.readyState: 状态码的意思
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
XMLHttpRequest:XMLHttpRequest.status:

textStatus:错误原因

null timeout error notmodified parsererror

errorThrown:(可选)捕获的错误对象

package com.zhjy.controller;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
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.ResponseBody;
import com.alibaba.fastjson.JSON;
import com.zhjy.dao.User;
import com.zhjy.service.IUserService;
import com.zhjy.vo.LoginVo;
@Controller
public class UserController {
    @Autowired
    private IUserService userService;
    @RequestMapping(value = "/singin", method = { RequestMethod.GET })
    @ResponseBody
    public String singIn(LoginVo msg, HttpServletRequest request) {
        System.out.println("----------------------" + msg.toString());
        User user = userService.getUserById(1);
        System.out.println(JSON.toJSON(user));
        return JSON.toJSON(user).toString();
    }
}
package com.zhjy.vo;
public class LoginVo {
    String loginName;
    String userPws;
    public String getLoginName() {
        return loginName;
    }
    public void setLoginName(String loginName) {
        this.loginName = loginName;
    }
    public String getUserPws() {
        return userPws;
    }
    public void setUserPws(String userPws) {
        this.userPws = userPws;
    }
    @Override
    public String toString() {
        return "LoginVo [loginName=" + loginName + ", userPws=" + userPws + "]";
    }
}
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    id="schedule-console" version="3.0">
    <display-name>Archetype Created Web Application</display-name>
    <!-- Spring和mybatis的配置文件 -->  
    <context-param>  
        <param-name>contextConfigLocation</param-name>  
        <param-value>classpath:spring-mybatis.xml</param-value>  
    </context-param>  
    <!-- 编码过滤器 -->  
    <filter>  
        <filter-name>encodingFilter</filter-name>  
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>  
        <async-supported>true</async-supported>  
        <init-param>  
            <param-name>encoding</param-name>  
            <param-value>UTF-8</param-value>  
        </init-param>  
    </filter>  
    <filter-mapping>  
        <filter-name>encodingFilter</filter-name>  
        <url-pattern>/*</url-pattern>  
    </filter-mapping>  
    <!-- Spring监听器 -->  
    <listener>  
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>  
    </listener>  
    <!-- 防止Spring内存溢出监听器 -->  
    <listener>  
        <listener-class>org.springframework.web.util.IntrospectorCleanupListener</listener-class>  
    </listener>  
    <!-- Spring MVC servlet -->  
    <servlet>  
        <servlet-name>SpringMVC</servlet-name>  
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
        <init-param>  
            <param-name>contextConfigLocation</param-name>  
            <param-value>classpath:spring-mvc.xml</param-value>  
        </init-param>  
        <load-on-startup>1</load-on-startup>  
        <async-supported>true</async-supported>  
    </servlet>  
    <servlet-mapping>  
        <servlet-name>SpringMVC</servlet-name>  
        <!-- 此处可以可以配置成*.do,对应struts的后缀习惯 -->  
        <url-pattern>/</url-pattern>
    </servlet-mapping>  
    <!-- tomcat默认路径 -->
    <welcome-file-list>  
        <welcome-file>/login1.html</welcome-file>  
    </welcome-file-list>  
    <!-- Servlet Mapping -->
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.js</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.png</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.jpg</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.gif</url-pattern>
    </servlet-mapping>
</web-app>

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹