用form表单实现Ajax---post提交
实例讲解:新闻发布实现无刷新上传,显示
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提交的更多相关文章
- jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...
- 关于form表单或者Ajax向后台发送数据时,数据格式的探究
最近在做一个资产管理系统项目,其中有一个部分是客户端向服务端发送采集到的数据的,服务端是Django写的,客户端需要用rrequests模块模拟发送请求 假设发送的数据是这样的: data = {'s ...
- Django框架 之 Form表单和Ajax上传文件
Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...
- form表单的ajax验证2
form表单的ajax验证2: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- laravel中form表单,ajax传值没反应
laravel中form表单,ajax传值没反应时,可能是令牌有问题. form中添加: {{csrf_token()}} ajax中添加: data: {'page': page, '_token' ...
- jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
- form表单取消按钮自动提交
默认写在form表单里的按钮可以自动提交表单,现在要实现的效果是点击button按钮调用js函数,再有ajax提交 <button type="button" class=& ...
- 文件上传---form表单,ajax,jquery,以及iframe无刷新上传 (processData,contentType讲解)
服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...
- Django学习系列之Form表单结合ajax
Forms结合ajax Forms的验证流程: 定义用户输入规则的类,字段的值必须等于html中name属性的值(pwd= forms.CharField(required=True)=<i ...
- Django框架form表单配合ajax注册
总结一下,其实form组件的主要功能如下: 生成页面可用的HTML标签 对用户提交的数据进行校验 保留上次输入内容 下面是写的登录页面的实例 1:views视图中的代码 # 注册页面 def regi ...
随机推荐
- hdu-4810 Wall Painting(组合数学)
题目链接: Wall Painting Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- Bellman-Ford算法判负环
算法思想:如果没有负权回路,dis数组应该会在n-1次松弛之后结束. 算法复杂度:O(n*m).比Dijkstra算法复杂度要高. 代码: bool Bellman_Ford(int s) { int ...
- HOJ 2678 Stars
题意:N个星星(x,y,z),星星的等级等于x,y,z都小于等于它的星星数量,问每个等级有多少星星. 思路:最暴力的方法是三维树状数组.但是会超内存.所以我们对其中一维先排好序,然后用二维的做. 代码 ...
- jquery.validate运用和扩展
一.运用 默认校验规则 ().required:true 必输字段 ().remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验 ...
- 【转】【UML】使用Visual Studio 2010 Team System中的架构师工具(设计与建模)
Lab 1: 应用程序建模 实验目标 这个实验的目的是展示如何在Visual Studio 2010旗舰版中进行应用程序建模.团队中的架构师会通过建模确定应用程序是否满足客户的需求. 你可以创建不同级 ...
- Discuz 取各排行榜数据
取论坛指定版块帖子或回复(first=1 就是帖子的1楼, 如果=0 就是调用回复,fid=62 是论坛版块号): SELECT * FROM discuzx.pre_forum_post where ...
- 【Mysql】 my.ini配置一例
# For advice on how to change settings please see # http://dev.mysql.com/doc/refman/5.6/en/server-co ...
- jQuery调用WCF服务传递JSON对象
下面这个示例使用了WCF去创建一个服务端口从而能够被ASP.Net页面通过jQuery的AJAX方法访问,我们将在客户端使用Ajax技术来 与WCF服务进行通信.这里我们仅使用jQuery去连接Web ...
- 【高清未加密】2015传智播客 最新21期c#asp.net 基础到就业班视频和源码
[.NET]传智播客第[21]期就业班视频(高清无加密)本套2015年21期传智播客C#ASP.NET win10通用mvc+app开发视频教程附源码,是一套非常不错的asp.net自学视频教程,传智 ...
- Linux常用指令---tar | zip (解压缩)
减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间.gzip是在Linux系统中经常使用的一个对文件进行压缩和解压缩的命令,既方便又好用.gzip不仅可以用 ...