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

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">


/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("");
}
$('#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);
}
}

好了，现在可行了，开服务器，行此jsp文件，页面如下示：

管理者にアクセスすると、次のように表示されます：

他の文字を入力する場合、页面は次のように表示されます：

jquery が ajax の機能を実行でき、コードがさらに詳しく説明されていることがわかります。

ただ、最後の本人には問題が一つあり、那珂は中国語を入力する際に​​後台に転送される乱コード、按照网上の好多办法都無解、不知道何者、谁有更好方法希望能给私は下に推します、本人は感激しません。

これは本人学上の結果であり、允转ダウンロード、欢迎交流、しかし转转轡は本文章の链地址を出さなければなりません

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。