jquery ajax C# は、データベース data_jquery の非リフレッシュ操作の簡単な例を実装します。

私たちは、同期実行と非同期実行の違いを理解しています。ユーザー エクスペリエンスを向上させるために、非同期メソッドを使用していくつかの問題に対処します。非常に不親切なので、ajax を使用してユーザー エクスペリエンスを完成させることができます。次に、jquery の ajax を使用して、更新せずにコンテンツを取得する方法について説明します。

コンテンツを一方的に取得するだけであり、ページネーションについては考慮しません。リフレッシュを行わないページネーションについては後ほど説明します。

返されたコンテンツを保存するためにページに Div コンテナを配置します

注: wait.gif は、アンロードされたコンテンツがロードされていないときに、プログレス バーに似た効果が表示され、ユーザー エクスペリエンスを向上させることができます。次に、最も重要なことは jquery であり、これは ajax で完了する必要があります

コード:

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

function getInfo()
{
$.ajax({
url:"doAction.aspx?fig=reader&id=1&page=1",
type:"POST",
success:function(Data)
{
$("#comment").html(Data);
//arguments[0] $("#comment").html(arguments[0]); を通じて受け取ることもできます。
},
error:function()
{
alert("プログラムエラー");
}
})
}

url: が指す URL

タイプ: 送信メソッド (POST または GET)

成功: 通信が成功した後に実行された関数

エラー: 通信失敗後に関数が実行されました

beforeSend: 通信前にハンシュオが実行されます

complete: 通信完了後に実行される関数

ここでは Get より安全な POST 送信メソッドが使用されているため、次のメソッドに置き換えることもできます

Copy code コードは次のとおりです。

function getInfo1() {
$.post("doAction.aspx", { fig: "reader", id:"1", page :"1" }, function () {
$("#comment").html(arguments[0]);
})
}

がわかります。 POST 送信メソッドを使用した場合のパラメーターの書き方が異なること。最初のメソッドと 2 番目のメソッドの違いは次のとおりです。

まず、doAction.aspx ページでパラメーターを受け取るとき、最初の方法は Request.QueryString["fig"] を使用することであり、2 番目の方法は Request.Form["fig"] を使用することです

2 番目に、最初のメソッドは、通信が失敗した場合にわかりやすいエラー メッセージを返すことができます。2 番目のメソッドは、まだ見つからない場合に返すことができます。

次に、doAction.aspx ページで、対応する処理を実行します。

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

if (Request.Form["fig"] != null && Request.Form["fig"].ToString() == "reader")
{
ajax_getcomment(" 1 ",1);
}
//データベースからデータを取得します
private void ajax_getcomment(string id, int page)
{

using (CommentBO cm = new CommentBO(id, page - 1))
{
Response.Write(cm.getCommentContent());
}
}

同様に、Get 送信メソッドのみを使用する場合、$.get("",{},function(){}) を使用する場合にも同じことが当てはまります。

コンテンツをロードする別の方法は、load() メソッドを使用することです。使用方法については、load を使用してコンテンツをロードする方法について簡単に説明します。

コード

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

この样就は页面里了にコンテンツを追加しました，ある一点问問題は発行页面内に返されるコンテンツとアラート出力の一部の不一致であり、アラート出力の戻りhtml标签、しかし页面はありません、那は页面すでに解析了html代コードのためです

その他の追加、修正、削除などの基本的な操作も同様であり、大きな変更がありますが、doaction.aspx 面内で異なる方法を使用しているだけであり、以下の主な jquery 代コードの出力が見られます

复制代码代码如下:

function addpinlun()
{
var $CommentParentID =arguments[0];
var $CommentUser =$('#CommentUser').val();
var $CommentText =$('#CommentText').val();
var $CommentValidate =$('#CommentValidate' ).val();

if($.trim($CommentUser)=='')
{
alert("请充填写昵称！");
$("#CommentUser").focus( );
return false;
}
if($.trim($CommentText)=='')
{
alert("请充填写评论内容！");
$("#CommentText").focus();
return false;
}
if($.trim($CommentValidate)=='')
{
alert("请输入验证码");
$("#CommentValidate").focus();
return false;
}
StopButton('CommentSubmit',10);
// 验证完了ajax を追加できます
$.ajax({
url: "doAction.aspx?action=add&commentparentid=" $CommentParentID "&commentuser="escape($CommentUser) "&commenttext="escape($CommentText) "&commentvalidate=" scape($CommentValidate) "&time=" new Date().toString(),
type: "GET",
成功: function (data) {
if (arguments[0] == "ERROR ") {
alert("验证码超時，请重新输入");
}
else {
getInfo();
$("#CommentText").val("" );
//验证成功時，刷新验证码图片
$("#CommentValidateImages").attr("src", "VerifyCode.aspx?s=" Math.random());
// alert("追加成功");
$("#alertMessgae").html(data);
}
$('#CommentValidate').val("");
}
})
}

function StopButton()
{
document.getElementById(arguments[0]).disabled=true;
document.getElementById(arguments[0]).value="提交(" argument[1] ] ")";
if(arguments[1]>=1)
{
arguments[1]--;
window.setTimeout("StopButton('" argument[0] " '," argument[1] ")",1000);
}
else
{
document.getElementById(arguments[0]).disabled=false;
document.getElementById( argument[0]).value="提交";
}
}

DoAction.aspx页面の部分代码页贴出来

复制代码代码如下:

if(Request.QueryString["action"]!=null && Request.QueryString["action"]=="add")
{
if (Session["VerifyCode"]. ToString().ToLower() != commentvalidate.ToLower())
{
Response.Write("ERROR");
}
else
{
DBQuery.ExecuteScalar( "コメントに挿入(commentparentid,commentuser,commenttext,commentreply,commentip)values('" commentparentid "','" commentuser "','" Server.HtmlEncode(commenttext) "','','" Request.ServerVariables[" REMOTE_ADDR"] "')");
Response.Write("<script>alert('コメントは正常に公開されました!</script>");
}
}

ajax には多数の属性があり、必要に応じて API を確認してさまざまな属性を呼び出すことができます。ここで注意すべき点が 1 つあります。

ユーザー名が重複しているかどうかを確認したい場合は、$.get の代わりに $.getIfModified を使用してテストできます。

初めて$.getを使用して名前を登録する場合は、再度テキストボックスに同じ名前を入力しても登録できますので、ご注意ください。 。