$('#letter-f form').submit(function(){ //调用preventDefault方法阻止事件冒泡，具体工作就是如果网页有脚本错误，那么则会阻止提交form表单 event.preventDefault(); var formValues = $('input[id="term"]').val(); var requestStr = {'term':formValues.toUpperCase()}; $.get('EGet.action', requestStr, function(data){ var responseObj = $.parseJSON(data); if(responseObj.success == 'true') { var html = ''; var dataObj = $.parseJSON(responseObj.resultMSG); html += "<div>"; html += "<h3>" + dataObj.term + "</h3>"; html += "<div>" + dataObj.part + "</div>"; html += "<div>"; html += dataObj.definition; if(dataObj.quote){ html += '<div>'; $.each(dataObj.quote, function(lineIndex, line){ html += '<div>' + line + '</div>'; }); if(dataObj.author){ html += '<div>' + dataObj.author + '</div>'; } } html += "</div>"; html += "</div>"; $('#dictionary').html(html); } else{ var warning = $('Sorry, your term was not found!'); $('#dictionary').html(warning); } }); });
这个例子援引的数据还是上一个EGet.action所用的那个数据。程序的操作过程基本是：
首先调用这个 preventDefault();这个方法在注释里也说明了，用于阻止事件冒泡带来的不便与麻烦。
接下来通过$()获得input的元素，使用val方法获得其值，接下来的使用方法与上例基本相同。
这里也可以使用serialize方法将input元素序列化成如下格式“term=xxx”这样。不过由于服务器端的java程序中的那些数据时硬编码的，所有，不是太方便用，就没用。
4.关于Ajax的观察员函数
jQuery包含了2个全局的ajax观察员函数：ajaxStart和ajaxStop。
分别在执行ajax操作的起始和结束时调用。例如：
//ajax的观察员函数 ajaxStart 和 ajaxStop $('<div>Loading...</div>').insertBefore('#dictionary') .ajaxStart(function(){ $(this).show(); }).ajaxStop(function(){ $(this).hide(); });
这里无论哪个a标签触发ajax操作，包括静态载入文件和动态服务器访问，都会触发ajaxStart和ajaxStop。
关于错误处理，常用的三个函数：success、complete、error。
下面以error为例：
.error(function(jqXHR){ $('#dictionary').html('An Error occurred:'+ jqXHR.status).append(jqXHR.responseText); });
可以以连缀的写法将error方法放置于get方法之后：“$.get().error()”这样。
刚才看了一下，这个可以将Tomcat的报错，加载到页面之上。这在有的时候还是很有用的。如图：
不过不知道为何这个将我原有样式也覆盖了一些，如果有哪位网友知道，麻烦指正一下问题所在。谢谢了。
5.Ajax和事件
Ajax动态访问服务器以后生成的元素，如果想绑定事件的话，一种方法是每次取到都重新绑定处理程序，这种相对来说比较简单，但是不适合DOM结构经常变化的场景。如果DOM结构经常变化，那么就需要用live方法，实现事件委托。
live用法与bind一样。
关于jquery ajax基础教程今天小编就给大家介绍到这里，后续还会持续给大家介绍，希望大家继续关注脚本之家网站，有你们的关注我们会做的更好，谢谢！
您可能感兴趣的文章: