$(function () { $("#Btn_HTML").click(function () { $.ajax({ url: "/echo/html/", type: "POST", data: { html: "Get HTML Data" } }).done(function(data){ $("#result").html(data) }); }); $("#Btn_JSON").click(function () { $.ajax({ url: "/echo/json/", type: "POST", data: { json: JSON.stringify({ firstName: "aa", "lastName": "bb" }) }, dataType: "json" }).done(function(data){ var html = "firstName = " + data.firstName + "<br/>"; html += "lastName = " + data.lastName; $("#result").html(html); }); }); $("#Btn_JSONP").click(function(){ $.ajax({ url: "/echo/jsonp/", type: "GET", data: { a: 1, b: 2, c: 3 }, dataType: "jsonp" }).done(function(data){ var html = "a:" + data.a + "<br/>"; html += "b:" + data.b + "<br/>"; html += "c:" + data.c + "<br/>"; $("#result").html(html); }); }); $("#Btn_XML").click(function(){ $.ajax({ url: "/echo/xml/", type: "POST", data: { xml: "<root><aa>xml data</aa></root>" }, dateType: "xml", success: function(data){ $("#result").html($(data).first().text()); } }); }); $("#Btn_JavaScript").click(function(){ $.ajax({ url: "/echo/js/", type: "GET", data:{ js: "alert('qq');" }, dataType: "script" }); }); });
<input type="button" id="Btn_HTML" value="HTML" /> <input type="button" id="Btn_JSON" value="JSON" /> <input type="button" id="Btn_JSONP" value="JSONP" /> <input type="button" id="Btn_XML" value="XML" /> <input type="button" id="Btn_JavaScript" value="JavaScript" /> <br /> <fieldset> <legend>Result</legend> <div id="result"></div> <br /> </fieldset>