prototype.js 和 jQuery.js ajax 調用

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

項目模組擴充團隊不同，採用架構不同，前台有prototype轉為jQuery，下示記錄ajax調用區分

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"    pageEncoding="ISO-8859-1"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title><script type="text/javascript" src="./js/prototype/prototype.js"></script><script type="text/javascript" src="./js/jquery/jquery-1.6.2.min.js"></script><script type="text/javascript" language="javaScript">function callServletByPrototypeAjax(){new Ajax.Request("test1.prototype",{parameters: "para1=val1¶2=val2",method:'post',onComplete:function(transport){alert("er");var valReturned = transport.responseText;alert("value returned from server port is " + valReturned);}});}function callServletByJQueryAjax(){jQuery.ajax({type:"post",url:"test1.jQuery?para1=value1",dataType:"text",success:function(data){alert("value returned from sever is : " + data );}});}</script></head><body><!--<form action=".do" method="get">--><form name="formRequest" action=".do" method="post"><input type="text" name="form1Para1" value="value1"/><input type="submit"  value="submit to show page"/></form><form name="prototypeAjaxRequest"><input type="button" value="call servlet by prototype Ajax" onclick="callServletByPrototypeAjax();"/></form><form name="JQueryAjax"><input type="button" id="callJQueryAjax" value="call servlet by JQuery Ajax" onclick="callServletByJQueryAjax();"/></form></body></html>

當然，在使用jQuery時，可以使用如下方式給組件註冊相關事件。需要注意prototype和jQuery對$符的衝突。

$(document).ready(function(){$("#callJQueryAjax").click(function(){jQuery.ajax({type:"post",url:"test1.jQuery?para1=value1",dataType:"text",success:function(data){alert("value returned from sever is : " + data );}});});};

上述Ajax申請資源為普通servlet，web.xml簡要配置如下，亦可在servlet3.0下使用註解方式。

<servlet>    <servlet-name>test1</servlet-name>    <servlet-class>com.test.Test1OfPrototype</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>test1</servlet-name>    <url-pattern>/test1.prototype</url-pattern>  </servlet-mapping>  <servlet>    <servlet-name>test1JQuery</servlet-name>    <servlet-class>com.test.Test1OfJQuery</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>test1JQuery</servlet-name>    <url-pattern>/test1.jQuery</url-pattern>  </servlet-mapping>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More