ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery+Ajax はリフレッシュ不要のoperation_jqueryを実装します
jQuery+Ajax はリフレッシュ不要のoperation_jqueryを実装します
- WBOYオリジナル
- 2016-05-16 15:21:531190ブラウズ
jQuery を使用して Ajax 操作を実装する
リフレッシュ効果のないAjaxページを実現したいのですが、Ajaxコードを直接使うのはちょっと面倒なのでjQueryを使って実現したいと思います。 jQuery は、Ajax のコア オブジェクトである XMLHTTPRequest を適切にカプセル化します。とても使いやすいです。
まず、サーバー側のコードを作成します。ここでは、サーブレットを使用してサーバー側のデータ処理を実装します。コードは次のとおりです。
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 设置编码格式
resp.setContentType("text/html;charset=UTF-8");
// 创建输出对象
PrintWriter out = resp.getWriter();
// 得到请求参数
String name = req.getParameter("uname");
// 判断
if (name == null || name.length() == 0)
{
out.println("用户名不能为空！");
}
else
{
// 判断
if (name.equals("cheng"))
{
out.println("用户名["+ name +"]已存在！请使用其他用户名！");
}
else
{
out.println("用户名[" + name + "]尚未存在！您可以注册！");
}
}
}
<!-- 引入Javascript文件 --> <script type="text/javascript" src="js/jquery-1.2.6.js"></script> <script type="text/javascript" src="js/verify.js"></script>JSP ページに必要なのは、テキスト ボックス、通常のボタン、および空の DIV レイヤーのみです。DIV は、サーバーから返された処理結果を表示するために使用され、ボタンのクリック イベントによって verify() メソッドがトリガーされます。以下のように:
<body> <center> 用户名：<input type="text" id="uname" name="uname" /> <br /> <input type="button" name="btnVerify" value="验证" onclick="verify()" /> <br /> <div id="result"> </div> </center> </body>
注: Ajax モードでデータを送信するためにフォームを使用する必要はないため、ページに ff9c23ada1bcecdd1a0fb5d5a0f18437 タグを記述する必要はありません。
次に、verify.js ファイルを作成し、そのファイル内に verify() メソッドを作成して、Ajax の非更新効果を実現します。これは、この例で最も重要な手順です。 jQuery を使用して Ajax を実装する場合は、4 つの手順があります:
- · テキスト ボックスの内容を取得します。
- · テキスト ボックスの内容をサーバー側のサーブレットに送信します。
- · サーバーから返されたデータを受信します。
- · サーバーから返されたデータを JSP ページに動的に表示します。
はまず jQuery を通じてオブジェクトを取得し、次のようにオブジェクトの値を取得します。
// 取得文本框对象,通过$()获取的所有对象都是jQuery对象
var jQueryObject = $("#uname");
// 获取文本框中的值
var userName = jQueryObject.val();
jQuery の $() 関数を通じてページのノードを取得し、jQuery オブジェクトを取得します。次に、jQuery の val() メソッドを通じてノードの値 (テキスト ボックスのコンテンツ) を取得します。 2 番目のステップ
では、次のように jQuery の get() メソッドを使用してサーバーにデータを送信します。
$.get("TestServlet?uname=" + userName,null,callback);
このメソッドは、XMLHttpRequest オブジェクトを返します。最初のパラメーターは、リクエストのサーバー側の URL です。通常、これは送信されるパラメーターです。最初の URL パラメータなので、通常、このパラメータはサーバーがデータを正常に処理した後のコールバック関数です。
3 番目のステップ
では、次のように、サーバーから返されたデータを処理するコールバック関数を作成する必要があります。
// 回调函数
function callback(data)
{
}
该回调函数有一个参数，该参数就是客户端返回的数据。
针对于第四步，再次利用jQueyr的选择器函数得到DIV层，将返回的数据显示在该层之上，如下：
function callback(data)
{
/**
* 第三步，接收服务器端返回的数据
*/
// 将服务器端返回的数据动态的显示在页面上
var resultObject = $("#result");
resultObject.html(data);
}
jQuery の html() メソッドを使用して、DIV レイヤーにデータを動的に表示します。
$.get("TestServlet?uname=" +$("#uname").val(),null,function(data){
$("#result").html(data);
}) もう 1 つ共有したいのは、Ashx+jQuery Ajax を使用して実装された「更新なしのログイン」の例です。
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
string name = context.Request.Params["name"].ToString().Trim();
if ("china".Equals(name))
{
context.Response.Write("1");//1标志login success
}
else
{
context.Response.Write("0");//0标志login fail
}
}
2. フロントエンドのサンプルコード aspx ファイル
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#test").live("click", function() {
//alert(0);
$.ajax({
type: 'POST',
url: 'Handler1.ashx',
data: { "name": $("#name").val() },
success: function(data) {
if (1 == data)
alert('login success');
else
alert('login fail');
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" name="name" id="name" />
<input type="button" name="test" id="test" value="validate" />
</div>
</form>
</body>
</html> 上記のコードをフロントエンド aspx ページとバックエンド ashx ページにそれぞれ入力すると、非常にシンプルな Ajax ログインが実現します。