JQuery - 留言之后,不重新加载数据,直接显示发表内容

留言板中,发表信息的时候,使用Ajax存储到后台数据库,如果存储成功,不重新加载数据库,直接显示发表内容。

代码:

var Nicehng = ‘‘;
var kkimgpath = ‘‘;
var text = ‘‘;

$(function () {
    if ($(document).scrollTop() != 0) {
        //刷新之后,回到顶部
        $(‘body,html‘).animate({ scrollTop: 0 }, 300);
    }
    //点击发表留言
    $("#submit").click(function () {
        editor.sync();
        text = $.trim($(‘#KindEditor‘).val());//获取KindEditor的内容
        if (text == "") {
            art.dialog({ id: ‘TS‘, width: 325, height: 170, content: ‘请输入内容!‘ });//显示提示文本框
        }
        else {

            Nicehng = $.trim($("#NiCheng").val());
            if (Nicehng == "") {
                Nicehng = ‘匿名‘;
            }
            var IgP = Imgpath();
            kkimgpath = "../Images/demopage/image-" + IgP + ".jpg";

            $.ajax({
                type: "POST",
                url: "Handeler/Ajax.ashx",
                data: "NiCheng=" + Nicehng + "&Imgpath=" + kkimgpath + "&text=" + text + "",
                success: function (msg) {
                    if (msg == "Null") {
                        art.dialog({ id: ‘TS‘, width: 325, height: 170, content: ‘参数为空,请联系管理员!‘ });
                    }
                    if (msg == "True") {
                        PageBindData();//当数据库存储成功时,在前台显示发表内容。
                        //清空
                        $("#NiCheng").val();
                        $("#Radio1").attr("checked","checked");
                        $("#KindEditor").val();
                        //回到顶部
                        $(‘body,html‘).animate({ scrollTop: 0 }, 500);
                    }
                    if (msg == "False") {
                        art.dialog({ id: ‘TS‘, width: 325, height: 170, content: ‘发表失败!‘ });
                    }
                }
            });
        }
    })

    //获取Radio选中图片的值
    function Imgpath() {
        var val = $(‘input:radio[name="Img"]:checked‘).val();
        if (val == null) {
            return "";
        }
        else {
            return val;
        }
    }

    function PageBindData() {
        var mydate = new Date();
        var t = mydate.toLocaleString();
        var imgpath = kkimgpath;
        var name = Nicehng;
        var ip = ‘121.123.123.12‘;
        var content = text;
        var time = t;
        //$("#newcontent").prepend("<div><ul><li><div><img src=‘" + kkimgpath + "‘/></div></li><li><div><span>" + name + "</span></div></li><li><div><span>" + ip + "</span></div></li></ul></div><div><div>" + content + "</div><div><ul><li ><span >2楼</span></li><li ><span>" + time + "</span></li><li><a href=‘####‘ >回复</a></li></ul></div></div>");

        $("#newcontent").prepend("<div class= ‘messagecontent‘><div class=‘maincontent‘><ul><li><div class=‘smheadimg‘><img class=‘img‘ src=‘" + kkimgpath + "‘></div></li><li><div class=‘smname‘><span class=‘smnamesm‘>" + name + "</span</div></li><li><div class=‘smip‘><span class=‘smipsm‘>" + ip + "</span></div></li></ul></div><div class=‘cmcontent‘><div class=‘cmcontentsm‘>" + content + "</div><div class=‘reply‘><ul class=‘replyul‘><li><span class=‘floor‘>2楼</span></li><li><span class=‘time‘>" + time + "</span></li><li><a class=‘smreply‘ href=‘javascript:void(0)‘>回复</a></li></ul></div> </div></div>");
    }
})

  

时间: 2024-09-30 19:36:48

JQuery - 留言之后,不重新加载数据,直接显示发表内容的相关文章

asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)

自从腾讯微博上线以来,基本上就开始用了,一直到现在,作为一个开发人员,也看到了腾讯微博一直在不停的改变,也不知道大家有没有发现,腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载数据,分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据,小生不才,还望各位大侠指教,呵呵~ 下面开讲: 首先说一下思路,我用的是Jquery,然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的,用到Jquery,首先要应用jquery.min.js类

viewPager使用时加载数据时显示IllegalStateException异常,解决不了。。。。

从newsPager中得到newsDetailTitles标题的详细内容,这是通过构造器传过来的.打印日志78行能打印,45行打印出来共size是12.但是程序出现了异常java.lang.IllegalStateException: The application's PagerAdapter changed the adapter's contents without calling PagerAdapter#notifyDataSetChanged. 从网上查询的结果是adapter中的数

android左右滑动加载分页以及动态加载数据

android UI 往右滑动,滑动到最后一页就自动加载数据并显示 如图: Java代码 package cn.anycall.ju; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.content.ActivityNotFoundException; impo

SpringMVC+Jquery -页面异步加载数据

背景: 做项目时涉及到页面,当我打算在controller中传一个list到页面,然后通过<c:foreach>循环遍历出来时,同事说:你这样每次都要刷新,这都是几百年前使用的技术了.你用post实现异步加载数据.然后就...... ResultUtil.java 工具类: package com.sgcc.uds.fs.config.web.util; import java.util.HashMap; import java.util.Map; import net.sf.json.JSO

jQuery实现当拉动滚动条到底部加载数据

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现当拉动滚动条到底部加载数据</title><script type="text/javascript&qu

jQuery异步加载数据添加事件

几个月前在一个项目中涉及到树形栏,然后看了很多插件,觉得有点麻烦,于是自己写了一个,写着写着就出问题了.当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作,可是用$(".XX").click();方法是不行的.1.之前用的是jq1.4.3 ,jq1.7一下都可以使用live()方法,来实现该功能 $('#div').live('click',function(){ //do stuff }); 但是live方法也有不支持的事件,例如:togg

[JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 [JavaScript] 纯文本查看 复制代码

jQuery.ajax()通过 HTTP 请求加载远程数据实力详解

通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax()可以不带任何参数直接使用. 注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置. 回调函数 如果要处理$.ajax()得到的数据,则需要使用回调函数.beforeSend.e

jquery easyui使用(三)&#183;&#183;&#183;&#183;&#183;&#183;datagrid加载数据(未解决)

<div id="table_Data"> </div> $("#table_Data").datagrid({ toolbar: '#myToolbar', url: urlAshx, queryParams: { "action": "carlist" }, method: 'post', width: 'auto', height: '500px', iconCls: 'icon-edit', s