使用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

What am I doing.

最近终于领悟到“不仅做人要低调,做事也要低调”的新的“指导思想”。

What am I doing?全部说出来的话就不显得我低调了,而不说的话,又是另外一种形式的高调。或者我应该选择一种很低调的方法说出来,比如:“不就是做几张网页么~”相对于原来的“做网站前端开发”,着实是低调了很多。

为什么有这样的效果呢,主要还是在选词方面。做网页的话大家会联想到学校里学的类似用frontpage之类的软件直接画出来那样简单的事或者用现成的模板什么的,总之就是小学生也能干的活。而“做网站前端开发”,那从听觉效果上就是另外一种效果,就NB闪闪了。

首先,“网站”一词让人联想到google、baidu、taobao等大网站,一听就觉得“有赚钱的门道”。

然后,“前端”一词具有歧义性,让人联想到“前沿、高端”的技术;而实际上,这里“前端”的意思仅仅是相对于“后台”而已。

最后一个词“开发”,那更是听上去专业的,令行外人望而却步……

 

还有,学习google的风格,做事没有出一点成果之前不透露半点风声,有成果也无声无息。

对了,话说最近炒得沸沸扬扬的chrome OS是怎么回事,一点都没有google一贯的做事风格。

工欲善其事,必先利其器

工欲善其事,必先利其器。比喻要做好一件事,准备工作非常重要。

对于工具,我一直是持“意识第一”的观念的。

对于真正的鼠绘牛人可以用windows画板、excel等乱七八糟的东西画出令人惊叹的作品。
意识好的人即使用frontpage这样的软件也可以做出漂亮的网页。

不过看我这篇文章的题目也知道我想说的是,如果工具更好的话,可以省很多事。

最近用上了firefox的插件–firebug
这插件直接导致我离不开firefox了。
很难想象我没有firebug以前做前端是怎么做的。
我深刻的认识到不知道firebug的前端开发者是多么可怜了。

Dw的cs4版内置支持高亮jquery的语法,而且还支持实时预览javascript运行完的效果,用起来的确挺舒服的。

vim的代码编辑效率的确比一般文本编辑器高出一大截,不过你得先花一段时间去学习这奇怪的纯键盘操作记事本要怎么用。

批量调整照片大小?这种事就不用有劳ps大哥了吧。Picasa,acdsee,xnview什么都行。