jquery与ajax

来源：互联网发布：平克弗洛伊德知乎编辑：程序博客网时间：2024/04/30 17:28

1.与后台数据异步交互：

<script language="javascript">function createQueryString(){var firstName = encodeURI($("#firstName").val());var birthday = encodeURI($("#birthday").val());//组合成对象的形式var queryString = {firstName:firstName,birthday:birthday};return queryString;}function doRequestUsingGET(){$.get("14-5.aspx",createQueryString(),//发送GET请求function(data){$("#serverResponse").html(decodeURI(data));});}function doRequestUsingPOST(){$.post("14-5.aspx",createQueryString(),//发送POST请求function(data){$("#serverResponse").html(decodeURI(data));});}</script></head><body><h2>输入姓名和生日</h2><form><input type="text" id="firstName" /><br><input type="text" id="birthday" /></form><form><input type="button" value="GET" onclick="doRequestUsingGET();" /><br><input type="button" value="POST" onclick="doRequestUsingPOST();" /></form><div id="serverResponse"></div></body>

2.控制ajax

<script language="javascript">function createQueryString(){//必须两次编码才能解决中文问题var firstName = encodeURI(encodeURI($("#firstName").val()));var birthday = encodeURI(encodeURI($("#birthday").val()));//组合成对象的形式var queryString = "firstName="+firstName+"&birthday="+birthday;return queryString;}function doRequestUsingGET(){$.ajax({type: "GET",url: "14-5.aspx",data: createQueryString(),success: function(data){$("#serverResponse").html(decodeURI(data));}});}function doRequestUsingPOST(){$.ajax({type: "POST",url: "14-5.aspx",data: createQueryString(),success: function(data){$("#serverResponse").html(decodeURI(data));}});}</script></head><body><h2>输入姓名和生日</h2><form><input type="text" id="firstName" /><br><input type="text" id="birthday" /></form><form><input type="button" value="GET" onclick="doRequestUsingGET();" /><br><input type="button" value="POST" onclick="doRequestUsingPOST();" /></form><div id="serverResponse"></div></body>

3.设置全局ajax:

<script language="javascript">$.ajaxSetup({//全局设定url: "14-5.aspx",success: function(data){$("#serverResponse").html(decodeURI(data));}});function createQueryString(){//必须两次编码才能解决中文问题var firstName = encodeURI(encodeURI($("#firstName").val()));var birthday = encodeURI(encodeURI($("#birthday").val()));//组合成对象的形式var queryString = "firstName="+firstName+"&birthday="+birthday;return queryString;}function doRequestUsingGET(){$.ajax({data: createQueryString(),type: "GET"});}function doRequestUsingPOST(){$.ajax({data: createQueryString(),type: "POST"});}</script></head><body><h2>输入姓名和生日</h2><form><input type="text" id="firstName" /><br><input type="text" id="birthday" /></form><form><input type="button" value="GET" onclick="doRequestUsingGET();" /><br><input type="button" value="POST" onclick="doRequestUsingPOST();" /></form><div id="serverResponse"></div></body>

ajax提示信息：

<script language="javascript">var oInputField;//考虑到很多函数中都要使用var oPopDiv;//因此采用全局变量的形式var oColorsUl;function initVars(){//初始化变量oInputField = $("#colors");oPopDiv = $("#popup");oColorsUl = $("#colors_ul");}function clearColors(){//清除提示内容oColorsUl.empty();oPopDiv.removeClass("show");}function setColors(the_colors){//显示提示框，传入的参数即为匹配出来的结果组成的数组clearColors();//每输入一个字母就先清除原先的提示，再继续oPopDiv.addClass("show");for(var i=0;i<the_colors.length;i++)//将匹配的提示结果逐一显示给用户oColorsUl.append($("<li>"+the_colors[i]+"</li>"));oColorsUl.find("li").click(function(){oInputField.val($(this).text());clearColors();}).hover(function(){$(this).addClass("mouseOver");},function(){$(this).removeClass("mouseOver");});}function findColors(){initVars();//初始化变量if(oInputField.val().length > 0){//获取异步数据$.get("14-10.aspx",{sColor:oInputField.val()},function(data){var aResult = new Array();if(data.length > 0){aResult = data.split(",");setColors(aResult);//显示服务器结果}elseclearColors();});}elseclearColors();//无输入时清除提示框（例如用户按del键）}</script></head><body><form method="post" name="myForm1">Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" /></form><div id="popup"><ul id="colors_ul"></ul></div></body>