この質問をする方法は正確にはわかりませんが、ここで説明します。これは私のシナリオに基づいた過度にスティップされたコードであることに注意してください。
以下で詳しく説明するように、サーバーを呼び出してデータ(HTMLまたはJS)を取得するJavaScript関数がクライアントにあります。呼び出された関数を多くのシナリオで再利用したいので、サーバーから返されるコンテンツタイプをハードコーディングしたくありません。私が抱えている問題は、AJAXが戻ってきたときに、すでにJSを評価していて、JSから結果を取得してDOMに追加する方法がわかりません。
説明する必要はないと思いますが、一連のイベントは次のとおりです。
- ユーザーがボタンをクリックする
- ダミー機能にルーティングされたクリック
- 関数dummyは、サーバーからAJAXを介してデータをロードします。これはHTMLまたはJSの場合があります。
AJAX呼び出しの結果を関数dummyにルーティングして戻し、データを「canvas」のIDでdivに追加できるようにします。私はevalを使いたくないし、呼び出しと適用のメソッドが役に立つかもしれないように見えるので混乱しているが、私にはわからない。サーバー上にコンテンツを作成して送信したくありません。クライアントにUI要素を処理してもらいたい。
これを解決するにはどうすればよいですか、それともこれを行うために必要なことを行うためのより良い方法はありますか?
ありがとう
クライアント側のJS/JQuery:
$(document).ready(function() {
$(".getcanvas").click(function(e){
dummy("/someurl");
});
}
function fetch(obj) {
var defaults, settings, oD, oS, oX;
if (!(obj.url === undefined)) {
defaults = {type:"GET",timeout:4000,async:false,success:function(iD,iS,iX){oD=iD;oS=iS;oX=iX;}};
settings = $.extend({}, defaults, obj);
$.ajax(settings);
}
return {"data":oD, "status":oS, "state":oX};
}
function get(url) {
var s = fetch({url: url});
return s.data;
}
function dummy(url) {
$("div#canvas").append(get(url));
}
function dothis(json) {
var res = '';
json = $.parseJSON(json);
$.each(json.objects, function(index, object) {
res += '<div id="+object.id+">'+object.message+'</div>';
}
return res;
}
HTML:
<html>
<head><title>Something</title></head>
<body>
<div id="canvas"/>
<input type="button" class="getcanvas" />
</body>
</html>
サーバー@/someurl:
<script>
var o = '{objects:[{id:57,message:"testing"},{id:45,"somethingnew"}]}';
dothis(o);
</script>