源代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿贾克斯</title>
<script src="../js/jquery.min.js"></script>
<style>
body {
font-family: 华文楷体;
}
.outter{
margin: 5% 40%;
background: sandybrown;
color:#ffffff;
width: 350px;
height: 280px;
}
.center{
margin-left:25%;
}
.contentList{
margin-left:15px;
padding-right:10px;
}
.row{
margin-top: 5px;
width: 100%;
}
input{
position: absolute;
left: 48%;
}
select{
position: absolute;
left: 48%;
}
</style>
</head>
<body>
<div id="outter" class="outter">
<h2 class="center">阿贾克斯Ajax</h2>
<label style="margin-left: 70%; font-family: 华文行楷">made by jayce</label>
<div class="row"><label class="contentList">站点:</label><input id="urlR" title="Input RequestUrl" value="http://10.0.1.46:8080/weChatKitchen/website"/></div>
<div class="row"><label class="contentList">接口:</label><input id="urlS" title="Input RequestUrl" value="/showStatus"/></div>
<div class="row">
<label class="contentList">Type:</label>
<select id="type" title="Select RequestType">
<option value ="get">get</option>
<option value ="post">post</option>
</select>
</div>
<div class="row"><label class="contentList">Data:</label><input id="data" title="Input Data" value="{modulesId:1}"></div>
<div class="row">
<label class="contentList">DataType:</label>
<select id="datatype" title="Select DataType">
<option value ="json">json</option>
<option value ="jsonp">jsonp</option>
<option value ="text">text</option>
</select>
</div>
<div class="row"><label class="contentList">successAlert:</label><input id="successalert" title="Input successAlert" value="succcess"/></div>
<div class="row"><label class="contentList">errorAlert:</label><input id="erroralert" title="Input errorAlert" value="error" /></div>
<div style="margin-top:10px"><input type="button" style=" margin-left:10%; background: lightskyblue; font-size: 20px;color: white" value="连接测试" id="bt"/></div>
</div>
<script>
$("#bt").click(
function () {
var url=document.getElementById("urlR").value+document.getElementById("urlS").value;
var type=document.getElementById("type").value;
var data=document.getElementById("data").value;
var datatype=document.getElementById("datatype").value;
var successalert=document.getElementById("successalert").value;
var erroralert=document.getElementById("erroralert").value;
ajax(url,type,data,datatype,successalert,erroralert);
}
);
function ajax(url,type,data,dataType,successAlert,errorAlert) {
alert(url+"--"+type+"--"+data+"--"+dataType+"--"+successAlert+"--"+errorAlert);
var result=eval('(' + data + ')');//Javascript
$.ajax({
url:url,//此处换成你的服务端地址
type:type,
data:result,
dataType:dataType,//jsonp 实现跨域
//jsonpCallback:"fun",//服务器返回执行的方法名
success:function (data) {
alert(data.message);
alert(successAlert);
},
error:function (err) {
alert(err.message)
alert(errorAlert);
}
});
}
</script>
</body>
</html>
界面截图
