利用ajax异步处理发布状态（发布还是停用）

最新推荐文章于 2024-04-23 00:29:43 发布
最新推荐文章于 2024-04-23 00:29:43 发布
阅读量786 收藏 1
点赞数
分类专栏： 学习轨迹 java前端 java 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zd305826520/article/details/51003455
版权
学习轨迹 同时被 3 个专栏收录
34 篇文章 0 订阅
订阅专栏
java
33 篇文章 0 订阅
订阅专栏
java前端
17 篇文章 0 订阅
订阅专栏
1、如图，改变发布状态

2、jsp代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="/common/header.jsp"%>
    <title>信息发布管理</title>
    <script type="text/javascript">
  //全选、全反选
    function doSelectAll() {
        // jquery 1.6 前
        //$("input[name=selectedRow]").attr("checked", $("#selAll").is(":checked"));
        //prop jquery 1.6+建议使用
        $("input[name=selectedRow]").prop("checked",
                $("#selAll").is(":checked"));
    }
    
    //添加
      function doAdd(){
          document.forms[0].action="${basePath}nsfw/info_addUI.action";
          document.forms[0].submit();
      }
      //编辑
      function doEdit(id){
          document.forms[0].action="${basePath}nsfw/info_editUI.action?info.infoId=" + id;
          document.forms[0].submit();
      }
    //删除
      function doDelete(id){
          document.forms[0].action="${basePath}nsfw/info_delete.action?info.infoId=" + id;
          document.forms[0].submit();
      }
  //多选删除
      function doDeleteAll(){
          document.forms[0].action="${basePath}nsfw/info_deleteSelected.action";
          document.forms[0].submit();
      }
  //异步发布信息，信息的id及将要改成的信息状态
  function doPublic(infoId,state){
      //1、更新信息状态
      $.ajax({
          url:"${basePath}nsfw/info_publicInfo.action",
            data:{"info.infoId":infoId,"info.state":state},
            type:"post",
            success:function(msg){
                //2、更新状态栏，操作栏的显示值
                if("更新状态成功" == msg){
                    if(state == 1){//说明信息状态已被改成发布，状态栏显示发布，操作栏显示停用
                        $("#show_"+infoId).html("发布");
                        $("#oper_"+infoId).html('<a href="javascript:doPublic(\''+infoId+'\',0)">停用</a>');
                    }else{
                        $("#show_"+infoId).html("停用");
                        $("#oper_"+infoId).html('<a href="javascript:doPublic(\''+infoId+'\',1)">发布</a>');
                    }
                }else{
                  alert("更新信息状态失败！");
                }
            },
            error:function(){
                alert("更新信息状态失败！");
            }
      });
  }
    </script>
</head>
<body class="rightBody">
<form name="form1" action="" method="post">
    <div class="p_d_1">
        <div class="p_d_1_1">
            <div class="content_info">
                <div class="c_crumbs"><div><b></b><strong>信息发布管理</strong></div> </div>
                <div class="search_art">
                    <li>
                        信息标题：<s:textfield name="info.title" cssClass="s_text" id="infoTitle"  cssStyle="width:160px;"/>
                    </li>
                    <li><input type="button" class="s_button" value="搜 索" onclick="doSearch()"/></li>
                    <li style="float:right;">
                        <input type="button" value="新增" class="s_button" onclick="doAdd()"/>&nbsp;
                        <input type="button" value="删除" class="s_button" onclick="doDeleteAll()"/>&nbsp;
                    </li>
                </div>

                <div class="t_list" style="margin:0px; border:0px none;">
                    <table width="100%" border="0">
                        <tr class="t_tit">
                            <td width="30" align="center"><input type="checkbox" id="selAll" onclick="doSelectAll()" /></td>
                            <td align="center">信息标题</td>
                            <td width="120" align="center">信息分类</td>
                            <td width="120" align="center">创建人</td>
                            <td width="140" align="center">创建时间</td>
                            <td width="80" align="center">状态</td>
                            <td width="120" align="center">操作</td>
                        </tr>
                        <s:iterator value="infoList" status="st">
                            <tr <s:if test="#st.odd"> bgcolor="f8f8f8" </s:if> >
                                <td align="center"><input type="checkbox" name="selectedRow" value="<s:property value='infoId'/>"/></td>
                                <td align="center"><s:property value="title"/></td>
                                <td align="center">
                                    <s:property value="#infoTypeMap[type]"/>    
                                </td>
                                <td align="center"><s:property value="creator"/></td>
                                <td align="center"><s:date name="createTime" format="yyyy-MM-dd HH:mm"/></td>
                                <td id="show_<s:property value='infoId'/>" align="center"><s:property value="state==1?'发布':'停用'"/></td>
                                <td align="center">
                                    <span id="oper_<s:property value='infoId'/>">
                                    <s:if test="state==1">
                                        <a href="javascript:doPublic('<s:property value='infoId'/>',0)">停用</a>
                                    </s:if>
                                    <s:else>
                                        <a href="javascript:doPublic('<s:property value='infoId'/>',1)">发布</a>
                                    </s:else>
                                        
                                    
                                    </span>
                                    <a href="javascript:doEdit('<s:property value='infoId'/>')">编辑</a>
                                    <a href="javascript:doDelete('<s:property value='infoId'/>')">删除</a>
                                </td>
                            </tr>
                        </s:iterator>
                    </table>
                </div>
            </div>
        <div class="c_pate" style="margin-top: 5px;">
        <table width="100%" class="pageDown" border="0" cellspacing="0"
            cellpadding="0">
            <tr>
                <td align="right">
                     总共1条记录，当前第 1 页，共 1 页 &nbsp;&nbsp;
                            <a href="#">上一页</a>&nbsp;&nbsp;<a href="#">下一页</a>
                    到&nbsp;<input type="text" style="width: 30px;" onkeypress="if(event.keyCode == 13){doGoPage(this.value);}" min="1"
                    max="" value="1" /> &nbsp;&nbsp;
                </td>
            </tr>
        </table>    
        </div>

        </div>
    </div>
</form>

</body>
</html>

3、后台action处理代码

//异步发布信息
    public void publicInfo(){
        try {
            if(info != null){
                //1、更新消息状态
                Info tem = infoService.findObjectById(info.getInfoId());
                tem.setState(info.getState());
                infoService.update(tem);
                
                //2、输出更新结果
                HttpServletResponse response = ServletActionContext.getResponse();
                response.setContentType("text/html");
                ServletOutputStream outputStream = response.getOutputStream();
                outputStream.write("更新状态成功".getBytes("utf-8"));
                outputStream.close();
                
            }
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

 

幸福是什么感觉呢
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX——异步处理技术
LJW123487的博客
05-15 1071
AJAX学习笔记
AJAX异步
weixin_49756484的博客
05-27 825
Ajax异步 这篇主要讲Ajax与XMLHttpRequest对象。 在开始讲新的知识点的之前，需要重新添加一个项目，我们把之前那个form表单提交的数据拷贝到我新建的项目当中（见图表1）我们需要用到这个表单 图表 1 当时我们讲过一个json，怎么才是一个json的字符串呢？ 则是通过{“键”：“值”}（见图表2）， 图表 2 这就是一个字符串，然后我们在通过一个变量去接收它，它就变成了一个js对象（见图表3） 图表 3 注意：json是js对象的一个子集。 Js对象里面
AJAX 异步请求详细教程
qq_54525448的博客
03-04 8720
Ajax 全称为 Asynchronous JavaScript And Xml -- 异步 js 和 xml，用来进行交互式网页的制作；也是一种动态的网页开发技术，在不加载整个页面的前提下进行页面局部内容的刷新；Ajax 在后台与服务器进行少量的数据交互，使用网页实现异步更新，比传统的刷新整个页面带给服务器的压力要小很多；让程序的运行更加顺畅；Ajax 分为原生 js 实现和 Jquery 框架实现；
Ajax异步请求方法(详细)
weixin_46721191的博客
04-26 5658
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML） 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面情况下，能够更新部分网页的技术。同步和异步同步互交：指向服务器发送一个请求,需要等待返回,然后才能够发送下一个请求，期间有个等待过程；异步互交：指向服务器发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待；
【Ajax-异步刷新技术】什么是Ajax？如何整合进JavaWeb项目？这一篇教你快速实现！
最新发布
m0_74187147的博客
04-23 1670
ajax技术称为“异步刷新技术”，也称为“局部刷新技术”，它可以在不提交整个页面的情况下，实现前后台的交互。在没有ajax请求之前，要更新页面上的任何数据，都必须将整个页面刷新一次才可以。有了ajax技术以后，要更新哪一块区域的数据，就只单独刷新这一小块的数据即可，其他区域的数据不用更新，这种刷新方式就是局部刷新。ajax是专门用来发送异步请求的一种技术。
ajax 发动put请求 点击修改状态（点改）
孤单的时候狗作陪！的博客
03-08 936
这里用的是laravel框架哦 1 。路由 Route::put('fangs/status/{id}',[\App\Http\Controllers\Admin\Fang::class,'status'])->name('fangs.status'); html <td>@if($item['fang_status']==1)<button class="btn btn-primary-outline radius status"&g.
信息发布1
08-08
10. **异步信息发布**：参考`异步信息发布.png`，可能涉及到Ajax技术，如jQuery的`$.ajax()`方法，用于在不刷新整个页面的情况下更新信息的状态，提高用户体验。例如，停用和发布操作可以通过发送异步请求到服务器，...
ASP.NET基于Ajax+Lucene构建搜索引擎的设计和实现(源代码+论文).zip
07-02
在ASP.NET中，可以利用AJAX控件工具包或者jQuery库来实现AJAX功能，提高用户体验，使得搜索引擎的搜索结果加载更为流畅，无需等待整个页面刷新。 Lucene是Apache软件基金会的一个开放源代码全文搜索引擎库。它提供...
【计算机专业ASP.NET-毕业设计100套之】ASP.NET基于Ajax+Lucene构建搜索引擎的设计和实现(源代码+论文)
04-09
Ajax，全称异步JavaScript和XML，虽然名称中有XML，但现在更常见的是使用JSON进行数据交换。Ajax的核心在于能够在不刷新整个页面的情况下更新部分网页内容，从而提供更好的用户体验。在搜索引擎中，Ajax可以用于实时...
AjAX异步页面处理技术
06-10
异步页面处理技术,类似goolge功能!!!强
jquery ajax 同步异步的执行 return值不能取得的解决方案
10-28
jquery ajax 同步异步的执行 return值不能取得的解决方案，需要的朋友可以参考下。
lucene全文搜索ajax例子
05-04
在这个示例中，用户在前端输入搜索关键字后，Ajax会异步发送请求到服务器，而不是刷新整个页面。服务器端的Lucene处理查询，找到匹配的结果，然后将结果返回给前端。前端接收到数据后，可以动态地更新页面，展示搜索...
基于ASP.net+Ajax+Lucene的构建搜索引擎源码.zip
08-26
Lucene支持多种语言，包括中文，能处理分词、停用词等问题，使得在不同语境下的搜索更为精准。 **项目实现** 在这个项目中，首先，开发者会使用ASP.NET建立后端架构，设置数据库连接，处理用户请求。然后，利用...
Ajax异步请求
m0_48844699的博客
10-31 4026
Ajax是一个异步请求,可以不用刷新整个页面，就可以达到局部更新的效果。百度的搜索也用到了ajax这个技术，当我们每次输入一个关键字的时候，搜索栏下面也会跟着改变，但是这个改变并不会刷新整个页面。想必大家也很好奇什么是异步请求，什么是同步请求，那么接下来就有我来进行揭秘吧。
Ajax
Zhangwei557的博客
09-01 613
#Ajax 概念：AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 1. 异步和同步：客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * 客户端不需要等待服务器端的响应。在服...
ajax
iteye_6945的博客
03-02 286
http://www.w3school.com.cn/ajax/ajax_intro.asp 什么是 AJAX ？ AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如...
Ajax之【Ajax异步实现步骤】
weixin_48485216的博客
05-06 1469
一、创建异步对象 var xmlhttp = new XMLHttpRequest(); 二、给异步对象绑定事件（onreadystatechange事件） 1、当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当readyState改变时，就会触发onreadystatechange事件，此事件可以指定一个处理函数function。 语法：xmlHttp.onreadystatechange = function(){ 处理请求的状态变化 ...
ajax异步修改新闻状态,ajax同步刷新
weixin_34966467的博客
08-06 269
【ajax同步刷新】的更多相关文章\js\ajax.js //图片形式状态切换 function toggle(url,action,obj,str,id){//状态转换/obj-当前对象/str-传入类型字符串/id-传入ID $.ajax({ type: "post", url: url, cache: false, data: "id="+id+"&action="+action+"...
利用Ajax异步上传的代码
05-27
以下是使用Ajax异步上传实现文件上传的示例代码： HTML代码： ```html <form id="uploadForm" enctype="multipart/form-data"> <input type="file" name="file"> <button type="submit">上传</button> </form> ``` JavaScript代码： ```javascript // 获取表单元素和文件输入框 var form = document.getElementById('uploadForm'); var fileInput = form.querySelector('input[type="file"]'); // 监听表单提交事件 form.addEventListener('submit', function(event) { // 阻止表单默认提交事件 event.preventDefault(); // 创建FormData对象，将文件内容打包 var formData = new FormData(); formData.append('file', fileInput.files[0]); // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 监听上传进度事件 xhr.upload.addEventListener('progress', function(event) { if (event.lengthComputable) { // 计算上传进度百分比 var percent = Math.round((event.loaded / event.total) * 100); console.log('上传进度：' + percent + '%'); } }); // 监听上传完成事件 xhr.addEventListener('load', function(event) { console.log('上传完成'); }); // 监听上传错误事件 xhr.addEventListener('error', function(event) { console.log('上传出错'); }); // 发送Ajax请求，上传文件 xhr.open('POST', '/upload', true); xhr.send(formData); }); ``` 在上面的示例代码中，我们首先获取表单元素和文件输入框，然后监听表单提交事件，在事件处理函数中创建FormData对象，将文件内容打包后发送到服务器端。在创建XMLHttpRequest对象后，我们还监听了上传进度、上传完成和上传错误等事件，以便及时获取上传状态。最后，我们打开POST请求并发送FormData对象，实现了文件的异步上传。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值