使用jquery与asp.net的webservice 进行通讯

asp.net有一套非常完善的框架可以很容易写出符合标准的提供webapi的程序。但是如果使用第三方的软件(如用jquery 的ajax)调用的话会出现一些细节上的问题。

比如:vs2010里面创建了一个webservice默认支持两种方法:

post进去一个json,返回一个json

post进去一个xml,返回一个xml

由于使用jquery构造一个json字符串还比较简单,解析起来也不困难。所以我首先采用了这种方法

下面给出了一个示例:

js端:

jsondata = “{examinees_name:'” + encodeURI($(‘#txtname’).val()) + “‘,examinees_ID:'” + $(‘#examinees_ID’).val() + “‘,examinees_psw:'” + $(‘#password1’).val() + “‘,examinees_email:'” + $(‘#email’).val() + “‘}”;

$.ajax({
    type: “POST”,
    contentType: “application/json”,
    url: “WebService.asmx/register”,
    data: jsondata,
    success: function (data) {
        alert(data.d);
    }
});

上面的代码中中jsondata构造出了一个json字符串来传递参数,通过表单元素构造出类似

“{examinees_name:’NAME’,examinees_ID:’123456′,examinees_psw:’123456′,examinees_email:’p@p.com’}”

这样的字符串post给服务端WebService.asmx/register

注意其中

contentType: “application/json”,
这个参数告诉服务器传递参数是以json形式的。

Technorati 标签: ,,

 

这种使用起来麻烦的地方是需要构造一个json字符串来传递参数,如果对于表单元素比较多,写起来就比较麻烦,而且也不方便维护。

其实WebService还支持直接post和get参数的方法,不过需要经过配置

在web.config文件里面的<webServices>节点按照如下配置即可使其支持直接post参数的方法。返回是一个xml。

<webServices>
<protocols>
    <add name=”HttpSoap”/>
    <add name=”HttpPost”/>
    <add name=”Documentation”/>
</protocols>
</webServices>

还可以加上

<add name=”HttpGet”/>

使其支持直接get传递参数的办法。

再给出一个直接使用post ajax实现登录的示例:

$(“#login_form”).bind(“submit”, function() {
    if ($(“#login_name”).val().length < 1 || $(“#login_pass”).val().length < 1) {
        $(“#login_error”).show();
        $.fancybox.resize(); 
        return false;
    }
    $.fancybox.showActivity();
    $.ajax({
        type        : “POST”,
        cache    : false,
        url        : “WebService.asmx/examineesLogin”,
        data        : $(this).serializeArray(),
        success: function(xml) {
       $(xml).find(“boolean”).each(function(){         //找到xml根节点
           if ($(this).text()==’true’)
           {
                 $.fancybox.close();
           }else{
                $.fancybox(‘用户名或密码错误,登陆失败’);
           }
       });
        }
    });
    return false;
});

jquery插件开发方法

jQuery为开发插件提拱了两个方法,分别是:

 

jQuery.fn.extend(object);

jQuery.extend(object);

 

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

 

 

fn 是什么东西呢。查看jQuery代码,就不难发现。


jQuery.fn = jQuery.prototype = {

   init: function( selector, context ) {//…. 

   //……

};

 

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

 

虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1”) 会生成一个 jQuery类的实例。

 

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

 

$.extend({

  add:function(a,b){return a+b;}

});

 

便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,

$.add(3,4);  //return 7

 

jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

  1. $.fn.extend({    
  2.     
  3.    alertWhileClick:function(){    
  4.    
  5.        $(this).click(function(){    
  6.    
  7.             alert($(this).val());    
  8.         });    
  9.     
  10.     }    
  11.     
  12. });    
  13.     
  14. $(“#input1″).alertWhileClick(); //页面上为:<input id=”input1” type=”text”/>

$(“#input1”) 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

 

真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 NB 的插件。

 

 

转自:http://www.cnblogs.com/yeer/archive/2009/05/07/1452122.html