JQuery では、AJAX を実装するには $.ajax()、$.post、$.get() の 3 つの方法があります。
最初に $.get() を見てみましょう:
$.get("test.jsp",
{ name: "cssrain", time: "2008/01/21" }, //渡すデータ
function(data){
alert( "返されたデータ: " data);
}
)
次に $.post() を見てみましょう:
形式は $ と同じです。 get().
$.post(" test.jsp",
{ name: "cssrain", time: "2008/01/21" }, //転送するデータ
function(data){
alert("返されたデータ: " data);
}
)
上記の 2 つのメソッドの違いは、リクエスト メソッド (1 つの get と 1 つの post) である必要があります。
最後に $ を見てみましょう。 ajax():
$.ajax({
url:'Accept.jsp',
type:' post', //データ送信メソッド
dataType:'html', //受け入れデータ形式 (ここには多数ありますが、一般的に使用されるのは html です) 、xml、js、json)
data:'text=' $(" #name").val() '&date=' new Date(), //渡されるデータ
error: function() { //失敗
alert('ドキュメントの読み込みエラー');
},
成功: function(msg){ //成功
alert( "データが保存されました: "
}
});
インスタンス
フロントエンド JSP 部分のコードは次のとおりです:...
投票数:
...
js 部分のコードは次のとおりです
function myvote(id){
$.post("vote. jsp", { id: id },
function( data){
eval("var data=" data);
if (data.issucc=="0"){
alert( data.mess)
}else{
/ /alert("ページを更新");
$("#i" data.myid).html(data.votenum);
}
返されるデータは json
バックグラウンドから返される json データは次のとおりです
{issucc:,mess:””,votenum:,myid:}
issucc: 成功したかどうか
mess: 情報、主にログインしていない、制限を超えているなどのエラー情報
votenum: 投票後の投票の総数
myid: 投票の ID、投票数を更新するために使用されます。ページへの投票
登録ログイン インスタンス
js
login.jsp によって返される型はテキスト形式であり、正しい場合は「OK」、
「エラー」の場合はそれは間違いです。
var userName
var パスワード;
var result;
$(document).ready(function(){
$("#load").hide();
$("#success").hide();
$("#error").hide();
});
$(document).ready(function(){
$("#button").click(function( ){
$("#error").hide();
$("#load").show("slow");
userName = $("#userName").val( );
パスワード = $("#password").val();
$.ajax({type: "post",
url: "login.jsp",
dataType: " html",
data: "userName=" userName "&password=" パスワード,
success: function(result){
var res = String($.trim(result));
if( res== "OK"){
$("#myTable").hide("slow");
$("#success").show("slow"); (res= ="error"){
$("#error").show("slow");
$("#load").hide("slow"); {
alert("例外が返されました");}
}
})
});
最初のページresponseText 形式
コードをコピー
out.print("OK")
}else{out.print("error");}
%>