6、jQueryのAjaxとJavaはPOST方式で対話する
2923 ワード
1.jQuery.post(url,[data],[callback],[type]):POST方式による非同期要求
1.1 パラメータ
url (String):要求するURLアドレスを送信する.
data (Map):(オプション)サーバに送信するデータは、Key/valueのキー値ペアで表されます.
callback (Function):オプションで読み込みに成功した場合にコールバック関数(Responseの戻り状態がsuccessである場合にのみ呼び出されます).
type (String):(オプション)公式の説明は、Type of data to be sentです.実はクライアントリクエストのタイプ(JSON、XMLなど)
1.2 jQueryのAjaxとJavaはPOSTでやり取り
1.2.1 htmlコード
1.2.3 Javscriptコード
1.2.4 JqueryAjaxServicelet.javaコード
1.2.5 Web.xmlコード
1.1 パラメータ
url (String):要求するURLアドレスを送信する.
data (Map):(オプション)サーバに送信するデータは、Key/valueのキー値ペアで表されます.
callback (Function):オプションで読み込みに成功した場合にコールバック関数(Responseの戻り状態がsuccessである場合にのみ呼び出されます).
type (String):(オプション)公式の説明は、Type of data to be sentです.実はクライアントリクエストのタイプ(JSON、XMLなど)
1.2 jQueryのAjaxとJavaはPOSTでやり取り
1.2.1 htmlコード
<body>
<div id="main">
<button id="myBut">Ajax </button>
<div id="container"></div>
</div>
</body><style type="text/css">
#main {
margin: 0 auto;
width: 400px;
}
#container {
width: 400px;
height: 300px;
border: 1px dashed #666;
text-align: center;
line-height: 300px;
}
</style>1.2.3 Javscriptコード
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
$('#myBut').click(function() {
$.post("JqueryAjaxServlet", {
age : 18,
name : "zhang"
}, function(data, textStatus) {
var container = $('#container');
var resultData = $.parseJSON(data);
var age = resultData.age;
var name = resultData.name;
container.html("name:" + name + "," + "age:" + age);
});
});
});
</script>1.2.4 JqueryAjaxServicelet.javaコード
public class JqueryAjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String age = request.getParameter("age");
String name = request.getParameter("name");
String personJSON = "{\"name" + "\":\"" + name + "\"," + "\"age"
+ "\":" + age + "}";
System.out.println(personJSON);
response.getWriter().write(personJSON);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
1.2.5 Web.xmlコード
<servlet>
<servlet-name>JqueryAjaxServlet</servlet-name>
<servlet-class>com.jquery.ajax.com.JqueryAjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>JqueryAjaxServlet</servlet-name>
<url-pattern>/JqueryAjaxServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>