jQuery学習メモ(1) -- jQueryを使って非同期通信を実装する(jsonを使って値を渡す) 具体的なアイデア

jQuery学習メモ(1) -- jQueryを使って非同期通信を実装する(jsonを使って値を渡す) 具体的なアイデア_jquery

WBOY

リリース： 2016-05-16 17:37:57

オリジナル

1046 人が閲覧しました

jQuery は現在人気のある JS ライブラリで、公式 Web サイトに「記述を減らし、実行を増やす」と書かれているとおり、簡単なコードで理想的な効果を生み出すことができます。 JqueryはこれまでのJavaScriptの書き方をある程度書き換えたもので、前回の記事でajaxを使って非同期通信を実現した効果をjqueryを使って実現し、jqueryの魅力を感じています。

まず、jquery の最新の js ファイルをダウンロードしてファイルに導入する必要があります。ここをクリックしてダウンロードしてください。

この通信は jQuery の jQuery.post(url,[data], [callback],[type]) メソッドを使用します。これは単純な POST ですrequest 関数を使用して、複雑な $.ajax を置き換えます。コールバック関数は、リクエストが成功したときに呼び出すことができます。パラメータは url、[data]、[callback]、[type] で、対応するパラメータのタイプは String、Map、Function、String です:

●url: 送信リクエストアドレス。

●data: 送信されるキー/値パラメータ。

●callback: 送信成功時のコールバック関数。

●type: コンテンツ形式、xml、html、script、json、text、_default)を返します)

新しい JSP ファイル jqueryDemo.jsp を作成します。コードは次のとおりです。

コードをコピーしますコードは次のとおりです:

<%@ page language="java"contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%> PUBLIC "-//W3C //DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

jquery /css">
table.demo{border-collapse: Collapse;margin-top: 50px;margin-left: 220px;}
table.demo th,td {padding: 0; border: 1px Solid # 000;}
#img,#msg{position: static;float: left;}
#account,#password1,#password2{margin-left: 10px;}
#img{margin-left: 10px;}

;script type="text /javascript">
function accountCheck(){
var account=$('#account').val();
if(account==""){ 🎜>alert("ユーザーアカウントを空にすることはできません! ");
$('#img').html("");
$('#msg').text(""); >return;
}
$.post('JqueryServlet',{strAccount:account},function(data){
eval("data=" data);
if(data.success) {
$( '#img').html("

");
}else{
$('#img'). html(" jQuery学習メモ(1) -- jQueryを使って非同期通信を実装する(jsonを使って値を渡す) 具体的なアイデア_jquery

");
}
$('#msg').text(data.msg);
}

="デモ" style= "幅: 450px;高さ: 200px;">

新規ユーザー登録

ユーザーアカウント:
*
;td style=" width:175px; ">

< /div>

ユーザーパスワード:
< ;td>
>
パスワードを繰り返します:

html>

新しいサーブレットファイル JqueryServlet.java を作成します。コードは次のとおりです。

コードをコピーします

コードは次のとおりです:

パッケージ com.ldfsoft.servlet; 
インポート java.io.IOException; 
インポート java.io.PrintWriter; 
インポート javax.servlet.ServletException; 
インポート javax.servlet.http.HttpServlet; 
importjavax.servlet.http.HttpServletRequest; 
importjavax.servlet.http.HttpServletResponse; 
/**
*サーブレット実装クラス JqueryServlet 
*/ 
public class JqueryServlet extendsHttpServlet { 
privatestaticfinallongserialVersionUID=1L; 
/**
* @see HttpServlet#HttpServlet() 
*/ 
public JqueryServlet() { 
super(); 
// TODO 自動生成されたコンストラクター スタブ 
} 
/**
* @see HttpServlet#service(HttpServletRequestrequest, HttpServletResponse 応答) 
*/ 
protectedvoid service(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException { 
//TODO Auto-生成されたメソッド スタブ 
request.setCharacterEncoding("utf-8"); 
response.setContentType("text/html;charset=utf-8"); 
String account=request.getParameter("strAccount"); 
PrintWriter out=response.getWriter(); 
文字列 str=""; //用以json传值 
if(account.equals("admin")){ 
str="{success:true,msg:'该账户已存在'}"; 
}else{ 
str="{success:false,msg:'该账户使用可能'}"; 
} 
out.write(str); 
} 
} 