ajax与spring boot web联调

Posted 深蓝无忌

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax与spring boot web联调相关的知识，希望对你有一定的参考价值。

aajax.html

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <h3>请输入你的信息：</h3>
        <form id="userForm">
            user:<input type="text" name="user" value="孙悟空" /><br/>
            喜欢的图书：<select multiple="multiple" name="books">
                <option value ="java">疯狂JAVA讲义</option>
                <option value ="javaee">轻量级java ee企业应用实战</option>
                <option value ="ajax">疯狂前端开发讲义</option>
                <option value ="xml">疯狂XML讲义</option>
            </select><br/>
            <input type="button" name="load" id="load" value="Load" />
        </form><hr/>
        
        <input type="button" name="ttt" id="test" value="test" />
        <div id="show"></div>
        
        <script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $("#load").click(function(){
                $.ajax({                    
                    url:"http://127.0.0.1:8080/pro",
                    contenttype:"application/text,charset=utf-8",
                    type:"POST",
                    data:$("#userForm").serialize(),
                    dataType:"html",
                    success:function(msg){
                        console.log(msg);
                        $("#show").empty();
                        $("#show").html(msg);
                        
                    },
                    complete:function(req,status){
                        console.log(req+"
complete:"+status);
                    },
                    error:function(data,req,status,error){
                        console.log(data+"
"+req+"
"+status+"
"+error);
                    },
                });    
            });
            
            $("#test").click(function(){
                $("#show").html($("#userForm").serialize());
            });
            
        </script>
    </body>
</html>

 

 

 

ProControll

 

package com.eob.demoajax;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;


@Controller
@RequestMapping("/")
@CrossOrigin
public class ProControll {
    @RequestMapping("/pro")
    public void sayHello(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        //response.setHeader("Access-Control-Allow-Origin","*");
        PrintWriter out=response.getWriter();
        String user=request.getParameter("user");
        String[] books=request.getParameterValues("books");
        out.println(user+",你好，现在时间是："+new Date());
        out.println("<br/>你喜欢的图书如下：");
        out.println("<ol>");
        for (int i=0;i<books.length;i++){
            out.println("<li>"+books[i]+"</li>");
        }
        out.println("</ol>");
        System.out.println(user+":"+books);
    }
}

 

以上是关于ajax与spring boot web联调的主要内容，如果未能解决你的问题，请参考以下文章

119. Spring Boot 加速你的maven构建——阿里云Maven仓库地址片从零开始学Spring Boot

spring-boot-starter-tomcat 与 spring-boot-starter-web

ajax师徒教学计划开启，数据联调练起来~

Spring-Boot学习纪要-4：Spring-Boot与Web开发

记录Spring Boot小项目的一些坑

从Spring-Boot开始深入理解Spring系列——Spring-Boot处理web开发的跨域问题