SSM项目中使用ajax(json)/post(json)异步方式

页面使用:

项目中添加jstl-1.2.jar包。

页面头进行引入:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="itheima" uri="http://itcast.cn/common/"%>

(1)需要在页面上显示的数据是来自于Controller的

       第一种方式:

        ModelAndView mav = new ModelAndView();
        mav.addObject("itemList",list);
        mav.setViewName("itemList");

       第二种方式:用默认的Model参数

    @RequestMapping(value="/test.action")
    public String get(Model model){
        model.addAttribute("test1","test1" );
        model.addAttribute("test2","test2" );
        model.addAttribute("test3","test3" );
        return "editItem";
    }

    页面显示:

    <h3>${test1}</h3>
    <h3>${test2}</h3>
    <h3>${test3}</h3>

页面中使用异步请求ajax/json:

(1)导包

    json支持:
    

    js文件支持:

    

    页面head中添加引入:

    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.4.4.min.js">
</script>

头:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

(1)Jquery的异步post提交

<head>

<script type="text/javascript">
        function deleteCustomer() {
            var id=$("#edit_cust_id").val();
            $.post("<%=basePath%>delete.action",{"id":id},function(data){//post提交,成功之后回掉显示信息,Controller返回的必需是json格式的数据
                alert("客户删除更新成功!");
            });
        }
    </script> 
</head>

id的值:<input type="text" id="edit_cust_id" name="id"/>
<a href="#" class="btn" οnclick="deleteCustomer()">删除</a>//调用方法

Controller页面:

@RequestMapping(value="/delete.action")
@ResponseBody
    public String get(Integer id){
        return "OK";//post异步提交的方式,返回的必需是OK串,并且异步post,Controller返回的都必须是json格式的串
    }

(2)表单序列化post异步提交

页面:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<script type="text/javascript">
        function updateCustomer() {
            $.post("<%=basePath%>update.action",$("#edit_customer_form").serialize(),function(data){//表单序列化提交
                alert("客户信息更新成功!");
            });
        }
    </script> 
</head>

<form id="edit_customer_form" class="" >
        <table width="100%" border=1>
            <tr>
                <td>商品名称</td>
                <td><input type="text" name="name" /></td>
            </tr>
            <tr>
                <td>商品价格</td>
                <td><input type="text" name="price" /></td>
            <tr>
                <td>商品简介</td>
                <td><textarea rows="3" cols="30" name="detail"></textarea>
                </td>
            </tr>
        </table>
    </form>
     <button type="button" class="btn" οnclick="updateCustomer()">保存修改</button>

Controller:

@RequestMapping(value="/update.action")
    @ResponseBody //post异步提交的,回掉回去的数据必需是json格式的
    public String get(Items item){
        System.out.println(item.getName());
        return "OK";
    }

(3)ajax异步get提交

页面:

<button type="button" class="btn" οnclick="editCustomer(1)">保存修改</button>

<script type="text/javascript">
        function editCustomer(id) {
            $.ajax({
                type:"get",//get请求
                url:"<%=basePath%>edit.action",
                data:{"id":id},//传递的参数
                success:function(data) {
                    alert(data.name);//回掉之后返回的是item,这里是得到item里面的name属性的值
                }
            });
        }
    </script> 

Controller:

@RequestMapping(value="/edit.action")
    @ResponseBody //返回的必需是json格式的数据
    public Items get(Integer id){
        Items item = new Items();
        item.setName("ok1");
        item.setPrice(12f);
        return item;
    }

(1)请求url,方法中携带参数

<a href="#" class="btn" οnclick="deleteCustomer(${row.cust_id})">删除</a>

<script type="text/javascript">
        function deleteCustomer(id) {

</script>

 

 

 

 

 

转载于:https://my.oschina.net/u/3161662/blog/2657956

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值