ajax+jsonを使用します。
2022-02-16 19:15:59
まずjsメソッドにajaxを書き、イベントを定義し、要素をトリガーさせ、トリガーされるとサーバーにデータが生成されます。
$.ajax({
type: "POST",
url: "test.php",
data: "name=garfield&age=18",
success: function(data){
$("#myDiv").html('<h2>'+data+'</h2>');
}
});
{
"msg": "login success",
"status_code": "200",
"userlist": [{
"uname": "zhangsan",
"age": "12"
}, {
"uname": "Lisi",
"age": "22"
}]
}
function loginMethod(){
var uname=$("#uname").val();
$.ajax({
type: "POST",
dataType:"json",
url: "login.do",
data: {"uname":uname,"oper":"ajaxlogin"},
success: function(data){
// callback success function
var msg=data.msg;
var list=data.userlist;
$("#msg_span").html('<font color="red" >'+msg+'</font>');
var info="";
//Show list information
for(var i=0;i<list.length;i++){
var u=list[i];
//splice the returned information
info+="<div style='color:green'>"+u.uname+"</div>";
}
$("#user_list").html(info);
},
error:function(){
$("#msg_span").html('<font color="red">network connect error</font>');
}
});
}
<イグ
$.ajax({
type : 'POST',
url : "/plugin/apop/check.do",
data : {
"instID" : instID,
"instCode" : instCode
},// {instID:LBUI.checkGistJSON.InstID,instCode:LBUI.checkGistJSON.FInstCode},
async : false,
dataType : 'text',
success : function(data) {
var json = JSON.parse(data.trim());
var mgs = json.message;
var success = json.success;
var JSONdata = json.datas;
var count = 0;
if (JSONdata.length > 0 && JSONdata ! = null) {
for ( var i = 0; i < JSONdata.length; i++) {
//alert(JSONdata[i].checkDetails);
count++;
var html = " <div class='layui-colla-item'><h2 class='layui-colla-title'>" +count+". " +JSONdata[i].checkPoint
+ "</h2><div class='layui-colla-content'>"
+ JSONdata[i].checkDetails + "</div></div>";
$("#firstUL").append(html);
$('.layui-colla-content p').last().remove();
}
if(count>3){
$("#moreInfo").css("display","block");
}
}
},
error : function(data) {
alert(data);
}
});
});
<イグ
json形式
function loginMethod(){
var uname=$("#uname").val();
$.ajax({
type: "POST",
dataType:"json",
url: "login.do",
data: {"uname":uname,"oper":"ajaxlogin"},
success: function(data){
// callback success function
var msg=data.msg;
var list=data.userlist;
$("#msg_span").html('<font color="red" >'+msg+'</font>');
var info="";
//Show list information
for(var i=0;i<list.length;i++){
var u=list[i];
//splice the returned information
info+="<div style='color:green'>"+u.uname+"</div>";
}
$("#user_list").html(info);
},
error:function(){
$("#msg_span").html('<font color="red">network connect error</font>');
}
});
}
テキストテキスト
$.ajax({
type : 'POST',
url : "/plugin/apop/check.do",
data : {
"instID" : instID,
"instCode" : instCode
},// {instID:LBUI.checkGistJSON.InstID,instCode:LBUI.checkGistJSON.FInstCode},
async : false,
dataType : 'text',
success : function(data) {
var json = JSON.parse(data.trim());
var mgs = json.message;
var success = json.success;
var JSONdata = json.datas;
var count = 0;
if (JSONdata.length > 0 && JSONdata ! = null) {
for ( var i = 0; i < JSONdata.length; i++) {
//alert(JSONdata[i].checkDetails);
count++;
var html = " <div class='layui-colla-item'><h2 class='layui-colla-title'>" +count+". " +JSONdata[i].checkPoint
+ "</h2><div class='layui-colla-content'>"
+ JSONdata[i].checkDetails + "</div></div>";
$("#firstUL").append(html);
$('.layui-colla-content p').last().remove();
}
if(count>3){
$("#moreInfo").css("display","block");
}
}
},
error : function(data) {
alert(data);
}
});
});
関連
-
[解決済み】Google Maps APIがAJAX使用時のみ「Uncaught ReferenceError: google is not defined」を投げる。
-
[解決済み] AJAX使用時にGoogle Maps APIが "Uncaught ReferenceError: google is not defined "を投げる。
-
[解決済み] ajaxの応答を待つためにseleniumを取得する方法?
-
[解決済み] RichFacesのa4j:ajaxタグのevent属性の取りうる値のリスト
-
[解決済み] <p:ajax>イベント一覧
-
ajax リクエストが Uncaught TypeError を報告しました。不正な呼び出しエラー
-
(フロントエンド)警告。メインスレッドでの XMLHttpRequest の同期は非推奨です。
-
jS Ajaxアップロードファイルのエラー "Uncaught TypeError: 不正な呼び出し"
-
AjaxにおけるbeforeSend関数の使用について
-
onclickイベントの値を渡して、ajaxリクエストの実行に移る
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン