PLC解密网-PLC培训学习-工控自动化人才技术交流

超级管理员

453

帖子

1378

回复

3110

积分

楼主
发表于 2020-02-16 12:54:03 | 查看: 1593 | 回复: 0
  • jquery.min.js

    因为要使用jquery进行提交和解析json格式数据,所以需要把jquery.mini.js复制到WebContent目录下先

  • json中文问题

    虽然在spring mvc 中文问题里已经提供了过滤器进行ssm的中文处理,但是json处理还要加点额外的内容。
    把原本的 

    <mvc:annotation-driven />

    修改为如下:



    1. <?xml version="1.0" encoding="UTF-8"?>

    2. <beans xmlns="http://www.springframework.org/schema/beans"

    3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"

    4. xmlns:tx="http://www.springframework.org/schema/tx" xmlns:jdbc="http://www.springframework.org/schema/jdbc"

    5. xmlns:context="http://www.springframework.org/schema/context"

    6. xmlns:mvc="http://www.springframework.org/schema/mvc"

    7. xsi:schemaLocation="http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.0.xsd

    8.        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd

    9.        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd

    10.        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd

    11.        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd

    12.        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">


    13. <context:annotation-config/>


    14. <context:component-scan base-package="com.how2java.controller">

    15. <context:include-filter type="annotation"

    16. expression="org.springframework.stereotype.Controller"/>

    17. </context:component-scan>


    18. <mvc:annotation-driven >

    19. <mvc:message-converters register-defaults="true">

    20. <bean class="org.springframework.http.converter.StringHttpMessageConverter">

    21. <property name="supportedMediaTypes" value="text/plain;charset=UTF-8" />

    22. </bean>

    23. </mvc:message-converters>

    24. </mvc:annotation-driven>


    25. <mvc:default-servlet-handler />


    26. <bean

    27. class="org.springframework.web.servlet.view.InternalResourceViewResolver">

    28. <property name="viewClass"

    29. value="org.springframework.web.servlet.view.JstlView" />

    30. <property name="prefix" value="/WEB-INF/jsp/" />

    31. <property name="suffix" value=".jsp" />

    32. </bean>

    33. </beans>

    34. <mvc:annotation-driven >

    35. <mvc:message-converters register-defaults="true">

    36. <bean class="org.springframework.http.converter.StringHttpMessageConverter">

    37. <property name="supportedMediaTypes" value="text/plain;charset=UTF-8" />

    38. </bean>

    39. </mvc:message-converters>

    40. </mvc:annotation-driven>

  • CategoryController

    控制器里提供3个方法,分别用来处理json 提交,json获取单个对象,json获取多个对象


    1. package com.how2java.controller;

    2. import java.util.ArrayList;

    3. import java.util.List;


    4. import org.springframework.stereotype.Controller;

    5. import org.springframework.web.bind.annotation.RequestBody;

    6. import org.springframework.web.bind.annotation.RequestMapping;

    7. import org.springframework.web.bind.annotation.ResponseBody;


    8. import com.alibaba.fastjson.JSONObject;

    9. import com.how2java.pojo.Category;


    10. // 告诉spring mvc这是一个控制器类

    11. @Controller

    12. @RequestMapping("")

    13. public class CategoryController {

    14. @ResponseBody

    15. @RequestMapping("/submitCategory")

    16. public String submitCategory(@RequestBody Category category) {

    17. System.out.println("SSM接受到浏览器提交的json,并转换为Category对象:"+category);

    18. return "ok";

    19. }


    20. @ResponseBody

    21. @RequestMapping("/getOneCategory")

    22. public String getOneCategory() {

    23. Category c = new Category();

    24. c.setId(100);

    25. c.setName("第100个分类");

    26. JSONObject json= new JSONObject();

    27. json.put("category", JSONObject.toJSON(c));

    28. return json.toJSONString();

    29. }

    30. @ResponseBody

    31. @RequestMapping("/getManyCategory")

    32. public String getManyCategory() {

    33. List<Category> cs = new ArrayList<>();

    34. for (int i = 0; i < 10; i++) {

    35. Category c = new Category();

    36. c.setId(i);

    37. c.setName("分类名称:"+i);

    38. cs.add(c);

    39. }


    40. return JSONObject.toJSON(cs).toString();

    41. }


    42. }

  • submit.html

    提交成功后,在tomcat控制台查看使用json方式提交的数据
    注: 不要在eclipse自带的浏览器里面点击,自带的浏览器有bug,有时候不能识别jquery, 会导致点击没有反应。 使用独立的浏览器,比如chrome,firefox点击测试


    1. <!DOCTYPE html>

    2. <html>

    3. <head>

    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    5. <title>用AJAX以JSON方式提交数据</title>

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

    7. </head>

    8. <body>

    9. <form >

    10. id:<input type="text" id="id" value="123" /><br/>

    11. 名称:<input type="text" id="name" value="category xxx"/><br/>

    12. <input type="button" value="提交" id="sender">

    13. </form>

    14. <div id="messageDiv"></div>


    15. <script>

    16. $('#sender').click(function(){

    17. var id=document.getElementById('id').value;

    18. var name=document.getElementById('name').value;

    19. var category={"name":name,"id":id};

    20. var jsonData = JSON.stringify(category);

    21. var page="submitCategory";


    22. $.ajax({

    23. type:"post",

    24. url: page,

    25. data:jsonData,

    26. dataType:"json",

    27. contentType : "application/json;charset=UTF-8",

    28. success: function(result){

    29. }

    30. });

    31. alert("提交成功,请在Tomcat控制台查看服务端接收到的数据");


    32. });

    33. </script>

    34. </body>


    35. </html>

  • getOne.html

    点击按钮,获取json数据


    1. <!DOCTYPE html>

    2. <html>

    3. <head>

    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    5. <title>用AJAX以JSON方式获取数据</title>

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

    7. </head>

    8. <body>

    9. <input type="button" value="通过AJAX获取一个Hero对象---" id="sender">


    10. <div id="messageDiv"></div>


    11. <script>

    12. $('#sender').click(function(){

    13. var url="getOneCategory";

    14. $.post(

    15. url,

    16. function(data) {

    17. var json=JSON.parse(data);

    18. var name =json.category.name;

    19. var id = json.category.id;

    20. $("#messageDiv").html("分类id:"+ id + "<br>分类名称:" +name );


    21. });

    22. });

    23. </script>

    24. </body>


    25. </body>

    26. </html>

  • getMany.html

    点击按钮,获取多个json数据


    1. <!DOCTYPE html>

    2. <html>

    3. <head>

    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    5. <title>用AJAX以JSON方式获取数据</title>

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

    7. </head>

    8. <body>

    9. <input type="button" value="通过AJAX获取多个Hero对象111" id="sender">


    10. <div id="messageDiv"></div>


    11. <script>

    12. $('#sender').click(function(){

    13. var url="getManyCategory";

    14. $.post(

    15. url,

    16. function(data) {

    17. console.log(data);

    18. var categorys = $.parseJSON(data);

    19. console.log(categorys.length);


    20. for(i in categorys){

    21. var old = $("#messageDiv").html();

    22. var category = categorys[i];

    23. $("#messageDiv").html(old + "<br>"+category.id+"   -----   "+category.name);

    24. }

    25. });

    26. });

    27. </script>

    28. </body>


    29. </body>

    30. </html>




您需要登录后才可以回帖 登录 | 立即注册

技术支持 KZYPLC V2.1 © 2020-2027

欢迎光临昆山中宇工控PLC论坛!您是第 6459581 位访问者, 日访问量: 8748 总访问量: 15927418,当前 2024-04-20 12:44:05 在线人数:54

ICP备案证书号: 苏ICP备14003016-2号