&‘米粒

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::
ajax demo（json/jsonp）

html 页面：

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
<!--
//jsonp
 function test(){
    if(!checkInput())
	 {
		return;
	 }
    $.ajax({
        url: "AddNews.ashx",
        type: "post",
        //传参方式：3种
　　　　 //data:$('#frmdmxx').serialize(),
        // data:{ Title: $("#Title").val(),  Content: $("#Content").val(),action:"Add" },
        //data:"Title="+$("#Title").val()+"&Content="+$("#Content").val()+"&action=Add",
        data: "Title="+$("#Title").val()+"&Content="+$("#Content").val()+"&action=Add",
        jsonpCallback: "sdbl",
        dataType: "jsonp",
        error: function() { alert("error") },
        success: function(data) {
            data = eval(data);
			alert(data.list);
        }
    });

  }
//json
 function test2() {
     if (!checkInput()) {
         return;
     }
     $.ajax({
         url: "AddNews.ashx",
         type: "post", 
         data: $('#frmdmxx').serialize(), 
         dataType: "json",
         //crossDomain: true == !(document.all),//防止低版本的ie 跨域问题 iis 要配置==》"微信图片_20170802175829.png" 
         error: function () { alert("error") },
         success: function (data) {
             data = eval(data);
             alert(data.list2);
         }
     });

 }

 function checkInput()
  {
	var msg = '';
	if($('#Title').val()=='')
	  {
		msg = "请输名称\n";
	  }
	if($('#Content').val()=='')
	  {
		msg += "请输入内容\n";
	  }
	 
         if(msg!='')
	  {
		alert(msg);
		return false;
	  }
	  else
	  {
		return true;
	  }
  }

  function show()
  {
	alert($('#frmdmxx').serialize());
  }
//-->
</script>
 <body>
  <input type="button" onclick="test()" id="btnsave" value=" 保存 (jsonp 提交表单)">
  <input type="button" onclick="test2()" id="Button1" value=" 保存 (json 提交表单)">
  <input type="button" onclick="show()" id="btnshow" value=" 显示提交参数 "> 
  <div id="msg"></div>
  <form id="frmdmxx" method="post" action="">
	名称<input type="text" name="Title" id="Title">
	内容<input type="text" name="Content" id="Content"> 
	<input type="hidden" name="action" id="action" value="Add">
  </form>
 </body>
</html>

AddNews.ashx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using BLL;
using Model;

namespace News.AjaxDemo
{
    /// <summary>
    /// AddNews 的摘要说明
    /// </summary>
    public class AddNews : IHttpHandler
    {
        NewsBLL bll = null;
        NewsModel m = new NewsModel();
        public void ProcessRequest(HttpContext context)
        { 
            context.Response.ContentType = "application/Json";
            context.Response.AddHeader("Access-Control-Allow-Origin", "*");//防止跨域问题 
            bll = new NewsBLL(); 
            string action = context.Request["action"];
            switch (action)
            {
                case "Add":
                    string titel = context.Request["Title"];
                    string Content = context.Request["Content"];
                    m.Title = titel;
                    m.Content = Content;
                    if(bll.AddNews(m))
                    {
                        //前端使用的dataType 为jsonp
                        if (context.Request["callback"] != null)
                        {
                            string func = context.Request["callback"];
                            context.Response.Write(func + "({\"list\":" + Newtonsoft.Json.JsonConvert.SerializeObject("true", new Newtonsoft.Json.Converters.DataTableConverter()) + "})");
                         }
                        else//json
                        {
                            context.Response.Write("{\"list2\":" + Newtonsoft.Json.JsonConvert.SerializeObject("true", new Newtonsoft.Json.Converters.DataTableConverter()) + "}");
                        }
                    }
                    break;
               
                default:
                    break;
            }
 
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

posted on 2017-09-04 22:00  youchim  阅读(171)  评论(0)    收藏  举报