实例讲解：新闻发布实现无刷新上传，显示

html代码：

注意：文本框中并没有id  ，，只有name。jquery获取每个文本框的值还要在拼写提交格式（id=value&name=value&...）太繁琐太麻烦！怎么提交到服务器？？js中有详解

<body>
    <form id="form1">//表单只留个id
        <table>
            <tbody>
                <tr>
                    <td>标题</td>
                    <td>
                        <input name="txtTitle" type="text" />

                    </td>
                </tr>
                <tr>
                    <td>内容</td>
                    <td>
                        <input name="txtContent" type="text" />

                    </td>
                </tr>
                <tr>
                    <td>时间</td>
                    <td>
                        <input name="txtTime" type="text" />

                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input id="btn" type="button" value="发表" />
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
        <p>---------------------评论列表-----------------------</p>
        <ul id="ul">
        </ul>

</body>

js代码：

注意：问题解决办法：通过表单，将请求报文序列化（两种方法，哪个都行！）成了集合或者是id=value&name=value&...这种形式

自己就不用拼写了。

 <script type="text/javascript">
        $(document).ready(function () {
            //加载新闻列表
            loadNews();
            //确认事件
            $("#btn").click(function () {
                //通过jquery序列化来发送post请求，两种序列化方式$("#form1").serializeArray();
                //或者$("#form1").serialize();
                var postData = $("#form1").serialize();
                $.post("InsertNews.ashx", postData, function (data) {
                    //$.post中的四个参数1.请求地址2.请求的数据，序列化之后直接将序列化后的结果传进去
                    //3.回调函数4.返回的数据类型，可有可无，写json，就响应结果以json的方式传过来；
                    //不写，默认纯文本
                    if (data != null) {
                        alert("新闻发表成功");
                        $("#ul").empty();
                        loadNews();
                    }
                });//post
            });//click
        });
        function loadNews() {
            $.getJSON("SelectAll.ashx", {}, function (_jsonData) {
                for (var i = 0; i < _jsonData.length; i++) {
                    $("<li><h5>" + _jsonData[i].title + "</h5>" + getDateFromString(_jsonData[i].time) + "</li>").appendTo($("#ul"));
                }//for
            });//function
        }
        //定义了一个转换时间格式的函数
        function getDateFromString(dateString) {
            //-----------------/Date(1441003046160)/---------------
            //用正则表达式匹配
            var reg = /\/Date\((\d+)\)/;
            var rel = reg.exec(dateString);//匹配字符串
            var date = new Date(parseInt(rel[1]));//转换成时间类型必须转换成整数
            return date.toLocaleDateString() + "   " + date.toLocaleTimeString();
        }
    </script>

服务端代码：

这是查询所有的列表内容的服务端代码，出现一个小问题，，时间这个鸟样子，如图：（解决方法在js端，用正则来匹配，封装了函数）

 private MyDBDataContext dbcon = new MyDBDataContext();
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //查询所有新闻信息
            List<news> list = this.dbcon.news.ToList();
            //序列化数据
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string data=jss.Serialize(list);
            context.Response.Clear();
            context.Response.Write(data);
            context.Response.End();
        }

用form表单实现Ajax---post提交的更多相关文章

  1. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

  2. 关于form表单或者Ajax向后台发送数据时，数据格式的探究

    最近在做一个资产管理系统项目,其中有一个部分是客户端向服务端发送采集到的数据的,服务端是Django写的,客户端需要用rrequests模块模拟发送请求 假设发送的数据是这样的: data = {'s ...

  3. Django框架 之 Form表单和Ajax上传文件

    Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...

  4. form表单的ajax验证2

    form表单的ajax验证2: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  5. laravel中form表单，ajax传值没反应

    laravel中form表单,ajax传值没反应时,可能是令牌有问题. form中添加: {{csrf_token()}} ajax中添加: data: {'page': page, '_token' ...

  6. jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...

  7. form表单取消按钮自动提交

    默认写在form表单里的按钮可以自动提交表单,现在要实现的效果是点击button按钮调用js函数,再有ajax提交 <button type="button" class=& ...

  8. 文件上传---form表单，ajax,jquery,以及iframe无刷新上传 （processData，contentType讲解）

    服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...

  9. Django学习系列之Form表单结合ajax

      Forms结合ajax Forms的验证流程: 定义用户输入规则的类,字段的值必须等于html中name属性的值(pwd= forms.CharField(required=True)=<i ...

  10. Django框架form表单配合ajax注册

    总结一下,其实form组件的主要功能如下: 生成页面可用的HTML标签 对用户提交的数据进行校验 保留上次输入内容 下面是写的登录页面的实例 1:views视图中的代码 # 注册页面 def regi ...

随机推荐

  1. hdu 5773 The All-purpose Zero 最长上升子序列+树状数组

    题目链接:hdu 5773 The All-purpose Zero 官方题解:0可以转化成任意整数,包括负数,显然求LIS时尽量把0都放进去必定是正确的. 因此我们可以把0拿出来,对剩下的做O(nl ...

  2. 2014 Super Training #8 A Gears --并查集

    题意: 有N个齿轮,三种操作1.操作L x y:把齿轮x,y链接,若x,y已经属于某个齿轮组中,则这两组也会合并.2.操作Q x y:询问x,y旋转方向是否相同(等价于齿轮x,y的相对距离的奇偶性). ...

  3. ArcGis 统计方法

    from:http://blog.sina.com.cn/s/blog_4177d50b0100fjbg.html 概述 一般常用的统计功能例如:唯一字段统计.数据行数统计.数据值求和统计等. 1.基 ...

  4. python基础随笔

    一: 作用域 对于变量的作用域,只要内存中存在,该变量就可以使用. 二:三元运算 name = 值1 if 条件 else 值2 如果条件为真:result = 值1 如果条件为假:result = ...

  5. 工作流模式与K2实现--（2）

      结构化过程  这两个模式的共同点在于:模式所涉及流程的执行路径是由运行时决定的,而非设计时确定.包括:Arbitrary cycles(强制循环模式) .Implicit termination( ...

  6. 用Swift GestureRecognizer 的几个注意点

    最近做了一些关于 GestureRecognizer 的工作 ,随笔记录一些需要注意的点: 1. PanGestureRecognizer (1)在使用时 注意在哪个view添加了 手势识别 self ...

  7. .net 4.0 自定义本地缓存策略的不同实现

    在分布式系统的开发中,为了提高系统运行性能,我们从服务器中获取的数据需要缓存在本地,以便下次使用,而不用从服务器中重复获取,有同学可能要问,为什么不使用 分布式缓存等,注意,服务器端肯定是考虑到扩展, ...

  8. Linux ssh登录和软件安装详解

    阿哲Style   Linux第一天 ssh登录和软件安装详解 Linux学习第一天 操作环境: Ubuntu 16.04 Win10系统,使用putty_V0.63 本身学习Linux就是想在服务器 ...

  9. C++ Set & MultiSet

    转自http://www.cppblog.com/wanghaiguang/archive/2012/06/05/177627.html STL Set介绍集合(Set)是一种包含已排序对象的关联容器 ...

  10. log4j输出日志乱码(转)

    log4j日志文件乱码问题的解决方法 log4j日志文件中文乱码处理方法 log4j 控制台和文件输出乱码问题解决 写在前面,第三篇文章中将原因解释的最清楚,为什么设置为UTF-8或者GBK就生效了, ...