7.ajax初识

最新推荐文章于 2023-04-12 21:22:56 发布

兴趣使然的CV工程师

最新推荐文章于 2023-04-12 21:22:56 发布

阅读量101

点赞数

分类专栏： SpringMVC 文章标签： ajax web html jsp jsonp

本文链接：https://blog.csdn.net/weixin_51211461/article/details/119695141

版权

SpringMVC 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

controller

package com.wu.controller;
import com.wu.pojo.User;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
/**
 * @author wuyimin
 * @create 2021-06-13-16:37
 * @description
 */
@RestController//不解析为跳转路径
public class AjaxController {
    @RequestMapping("/t1")
    public String test() {
        return "hello";
    }
    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:param" + name);
        if ("wu".equals(name)) {
            response.getWriter().print("true");
        } else {
            response.getWriter().print("false");
        }
    }
    @RequestMapping("/a2")
    public List<User> a2() {
        ArrayList<User> user = new ArrayList<User>();
        //添加数据
        user.add(new User("吴某", 1, "男"));
        user.add(new User("吴某", 2, "男"));
        user.add(new User("吴某", 3, "男"));
        return user;
    }
    @RequestMapping("/a3")
    public String a3(String name, String pwd) {
        String msg="";
        if (name != null) {
            if ("admin".equals(name)) {
                msg = "ok";
            } else {
                msg = "用户名有误";
            }
        }
        if (pwd != null) {
            if ("123456".equals(pwd)) {
                msg = "ok";
            } else {
                msg = "密码有误";
            }
        }
        return msg;
    }
}

applicationContext

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd   http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!-- 1.注解驱动-->
    <mvc:annotation-driven/>
    <!-- 2.静态资源过滤-->
    <mvc:default-servlet-handler/>

    <!--解决json前端的乱码-->
    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
    <!-- 3.扫描包-->
    <context:component-scan base-package="com.wu.controller"/>
    <!-- 4.视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>

index.jsp这里实现的是失去焦点的时候如果内容不正确就alert警告为false 正确就为false

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery.js"></script>
    <script>
        function a() {
            $.post({
                url:"${pageContext.request.contextPath}/a1",
                data:{"name":$("#username").val()},
                success:function (data) {
                    alert(data);
                },
                error:function () {
                    alert("请求失败")
                }
            }
        )
        }
    </script>
</head>
<body>
<%-- 失去焦点的时候，发起与一个请求到后台--%>
<input type="text" id="username" onblur="a()">
</body>
</html>

html.jsp 这里实现的是使用iframe来模拟ajax的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe测试页面无刷新</title>
    <script>
        function go() {
            var url=document.getElementById("url").value;
            document.getElementById("iframe1").src=url;
        }
    </script>
</head>
<body>
<div>
    <p>请输入地址：</p>
    <p>
        <input type="text" id="url" value="https://www.baidu.com">
        <input type="button" value="提交" onclick="go()">
    </p>
</div>
<div>
    <iframe id="iframe1" style="width: 100%;height: 500px"></iframe>
</div>
</body>
</html>

test2.jsp这里实现的是点击按钮显示姓名年龄性别而不刷新转发页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
               // post(url,parm(可以省略),succes)
               $.post("${pageContext.request.contextPath}/a2",function (data) {
                   var html="";
                   for(let i=0;i<data.length;i++){
                       html+="<tr>"+
                           "<td>"+data[i].name+"</td>"+
                           "<td>"+data[i].age+"</td>"+
                           "<td>"+data[i].sex+"</td>"+
                           "</tr>"
                   }
                   $("#content").html(html)
               });
            })
        })
    </script>
</head>
<body>
<input type="button" value="加载数据" id="btn">
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">

    </tbody>
</table>
</body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery.js"></script>
    <script>
        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"name":$("#name").val()},
                success:function (data) {
                    if(data.toString()==='ok'){
                       $("#userInfo").css("color","green");
                    }else{
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data)
                }
            })
        }
        function a2() {
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"pwd":$("#pwd").val()},
                success:function (data) {
                    if(data.toString()==='ok'){
                        $("#pwdInfo").css("color","green");
                    }else{
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(data)
                }
            })
        }
    </script>
</head>
<body>
<p>
    用户名：<input type="text" id="name" onblur="a1()">
    <span id="userInfo"></span>
</p>
<p>
    密码：<input type="text" id="pwd" onblur="a2()">
    <span id="pwdInfo"></span>
</p>
</body>
</html>

兴趣使然的CV工程师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7.ajax初识

controllerpackage com.wu.controller;import com.wu.pojo.User;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bi...
复制链接

扫一扫