AJAX配置以及JS动态生成HTML问题

最新推荐文章于 2022-04-04 15:10:45 发布

qq_38263784

最新推荐文章于 2022-04-04 15:10:45 发布

阅读量1.7k

点赞数 1

分类专栏： java 文章标签： ssm AJAX Json

本文链接：https://blog.csdn.net/qq_38263784/article/details/79853723

版权

java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

步骤1.首先实现在jsp页面中使用AJAX将数据传入到后台，需要执行的步骤：

引入JQuery插件，即：

<script type="text/javascript" src="/bluetravel/js/jquery.min.js"></script>

前提是咱得先下好jquery.min.js插件放到指定的src目录下，我这里是/bluetravel/js/jquery.min.js.

编写javascript语句：

 <script type="text/javascript">
        $(function () {
            $("#b1").click(function () {
                $.ajax({
                    url: "/bluetravel/home/ajaxLogin",
                    data: {
                        username: $("input[name='username']").val(),
                        password: $("input[name='password']").val()
                    },
                    type: "POST",
                    dataType: "json",//如果接受不到json对象，即总是进入error函数，也可以将json换为text,就一定可以进到success里面了
                    success: function (data) {
                        console.log(data['result']);//获取的参数data是Map<String,String>类型，所以获得value方式是data[key]
                        alert(data['result']);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.readyState + "-" + XMLHttpRequest.status + "-" + XMLHttpRequest.responseText);
                    }
                });
            })
        })

    </script>

body里面的内容如下：

<body>
<%@include file="head.jsp" %>

用户名：<input type="text" name="username" value=""/> <br/>
密 码：<input type="password" name="password" value=""/> <br/>
<input id="b1" type="button" value="提交"/> <br/>


</body>

步骤2.后台向前端传输json数据。操作如下：

在maven工程里面的pom.xml文件里面引入一下三个jar包，
```
jackson-databind、jackson-annotations 、jackson-core
```

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.4</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.9.4</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.9.4</version>
    </dependency>

这样@ResponseBody才能将目标text对象转化为json对象。

配置applicationContext.xml文件，解决发送的数据有中文乱码现象（？？？？）

<!-- 设置对字符串的消息转换器 -->
    <bean id="stringHttpMessageConverter"
          class="org.springframework.http.converter.StringHttpMessageConverter">
        <property name="supportedMediaTypes">
            <list>
                <value>text/plain;charset=UTF-8</value>
                <value>application/json;charset=UTF-8</value>
            </list>
        </property>
    </bean>
    <!-- 避免IE执行AJAX时,返回JSON出现下载文件 -->
    <!-- Jackson 是Spring 自带的功能 -->
    <bean id="mappingJackson2HttpMessageConverter"
          class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
        <property name="supportedMediaTypes">
            <list>
                <value>application/json;charset=UTF-8</value>
                <value>application/xml;charset=UTF-8</value>
                <value>text/html;charset=UTF-8</value>
                <value>text/plain;charset=UTF-8</value>
                <value>text/xml;charset=UTF-8</value>
                <value>text/javascript;charset=UTF-8</value>
            </list>
        </property>
    </bean>
    <mvc:annotation-driven><!-- 配置以上两个消息消息转换器解决返回的Json数据中文乱码问题-->
        <mvc:message-converters>
            <ref bean="stringHttpMessageConverter"/>
            <ref bean="mappingJackson2HttpMessageConverter"/>
        </mvc:message-converters>
    </mvc:annotation-driven>

看下我@controller里面的内容：

@RequestMapping(value = "ajaxLogin", method = RequestMethod.POST)
@ResponseBody
public Map<String, String> ajaxLogin(@RequestParam("username") String username, @RequestParam("password") String password) {
    Map<String, String> map = new HashMap<String, String>();
    String result = null;
    if (username.equals("") || password.equals("")) {
        result = "用户名或密码不能为空";
        map.put("result", result);
        return map;
    }
    List<User> users = userService.getUsers();
    for (User user : users) {
        if (username.equals(user.getAccount()) && password.equals(user.getPassword())) {
            result = "登录成功！";
            map.put("result", result);
            return map;
        }
    }
    result = "用户名或密码错误！";
    map.put("result", result);
    return map;
}

敲黑板了！！！！干货提示：

如果前端接受到的数据alert(data)显示[object Object]可以用console.log(data)查看传进来的参数信息是什么，一般会进入error：function（）
因为json对数据类型要求很严格，后台返回的json数据类型最好是一个对象、类.之前我返回的一个字符串result变量，但前台jsp页面接受到的一直不是Json类型的。最后，正如我现在Controller里的代码，我换成Map,里面put<"result",reslut>，前端引用的时候data["result"]就能识别为json类型并且能够读出里面的String类型的变量result.
在JS中，for... in遍历数组，$.each(galleryDesignList, function (i, galleryDesign) {});遍历集合、map等。
防止$().click(function(){})在执行后发生页面刷新：

可在函数中添加window.event.returnValue = false；
检查<form>表单否有onsubmit,将其禁止设为“return false”
将<a>标签中无url的href=""的项删掉

当通过AJAX动态创建html文本($().html、innerHTML)时会丢失之前绑定的JS控制、点击等时间，可以用$().on()来委托不变元素控制未来元素，例如：$("body .Paging ").on("click", "li", function () {}。注意：“body .Paging”是原有不变而不是动态生成的元素，然后对<li>元素进行函数绑定

$(document).ready(function(){}在一个页面中它可以被编写多个（而window.onload只能编写一个否则会把之前的覆盖），函数内容应该html标签注册事件，并且注册事件在DOM结构加载完就已执行，但该函数内容里不能编写文档加载之后的调用函数，应该写到作用域外边，否则不会响应调用事件。用例如下：

<script>
$(document).ready(function(){
	$("button").on("click",function(){ 
		var version = $().jquery; 
		alert("你正在运行的jQuery版本为: " + version); 
	});
	
}); 
	function function1(){
		var value = $("#imgFile").value;
		alert("2222")
	}
</script>
</head>
<body>

<button>点我!</button>
	
<input type="file" id ="imgFile" />
<input type="submit" onclick="function1()"/>
</body>