从.jsp发送ajax请求

最新推荐文章于 2023-12-01 14:18:38 发布

饿嘛！？

最新推荐文章于 2023-12-01 14:18:38 发布

阅读量1k

点赞数

分类专栏： ajax 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44615968/article/details/118099697

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.在button上添加onclick事件
在这里插入图片描述
2.在<head>的<script>中添加函数

function modifyName(){
            $.ajax({
                type:"post",  //方式
                url:"${pageContext.request.contextPath}/xxxxxxxx/xxxxxx/modifyName", //寻址，处理页面
                data:{"id":$("#proTypeNum").val(),"name":$("#proTypeName").val()}, //通过input的id获取
                //datatype:"json",
                success:function (data){
                    if(data.status==1){
                       //处理事件,如重新载入页面
                       //location.href="${pageContext.request.contextPath}/xxxxxxxx/xxxxxx/findAll
                            
                    }
                    else{
                        .....   //处理事件
                    }
                }
            })
        }

3.返回值加入.jsp中
例1：
ajax请求（在<head>的<script>中添加函数）：

 $.ajax({
            url: '${pageContext.request.contextPath}/company/companyManage.do',
            type: 'post',
            data : {"pageNo":pageNo,"pageSize":pageSize},
            dataType:'json',
            success: function(data){
                //data中有列表
                var list = {
                    companys: data.list,
                    pageNo:data.pageNum
                };
                //或 var companys=data.list; ？
        });

获取到值之后，在<head>中加入

<script type="text/html" id="data-template">
	  			    {{each companys as company index}} //模块语言？
		  			<tr> 	 
		  			//company是一个类，其中包括companyName等变量	 	 	 	 
		  				<td>{{company.companyName}}</td>
		  				<td>{{company.financingInReturn}}</td>
		  				<td>{{company.companyDetail}}</td>
		  				<td>
		  					<a class="" href="">
		  						修改
		  						<span class=""></span>
		  					</a>
		  					<a class="btn btn-primary btn-xs btn-success" href="/company/detail.do?id={{company.companyId}}&pageNo={{pageNo}}">
		  						详情
		  						<span class="glyphicon glyphicon-list-alt"></span>
		  					</a>
		  					<a class="btn btn-primary btn-xs btn-danger" href="javascript:;" onclick="deleteCompany('{{company.companyId}}','{{pageNo}}')">
		  						删除
		  						<span class="glyphicon glyphicon-remove"></span>
		  					</a>
		  				</td>
		  			</tr>
		  			{{/each}}
</script>

例2：
ajax请求（在<head>的<script>中添加函数）：

function modifyName(){
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/backend/productType/modifyName",
                data:{"id":$("#proTypeNum").val(),"name":$("#proTypeName").val()}, //通过id获取值
                success:function (data){
                    if(data.status==1){
                        alter("成功");
                        location.href="${pageContext.request.contextPath}/backend/productType/findAll
                            }
                        );
                    }
                    else{
                       alter("失败");
                    }
                }
            })
        }

获取到值之后：在<body>的你想的位置

<c:forEach items="${data.list}" var="productType">
                <tr>
                    <td>${productType.id}</td>
                    <td>${productType.name}</td>
                    <td>
                        <c:if test="${productType.status==1}">启用</c:if>
                        <c:if test="${productType.status==0}">禁用</c:if>
                    </td>
                    <td class="text-center">
                        <input type="button" class="btn btn-warning btn-sm doProTypeModify" value="修改"
                        onclick="showProductType(${productType.id})" >
                        <input type="button" class="btn btn-warning btn-sm doProTypeDelete" value="删除" onclick="showDelModel(${productType.id})">
                        <c:if test="${productType.status==1}">
                            <input type="button" class="btn btn-danger btn-sm doProTypeDisable" value="禁用">
                        </c:if>
                        <c:if test="${productType.status==0}">
                            <input type="button" class="btn btn-success btn-sm doProTypeDisable" value="启用">
                        </c:if>

                    </td>
                </tr>
                </c:forEach>

设置的样式长这样：
在这里插入图片描述

饿嘛！？

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
从.jsp发送ajax请求

1.在button上添加onclick事件2.在<head>的<script>中添加函数function modifyName(){ $.ajax({ type:"post", //方式 url:"${pageContext.request.contextPath}/xxxxxxxx/xxxxxx/modifyName", //寻址，处理页面 data:{"
复制链接

扫一扫