非跨域请求
get请求
<button onclick="sedjson()">测试json数据</button>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function sedjson() {
$.ajax({
type:"GET",
url:"s", //s是SpringMVC中Controller中的请求地址
contentType:"application/json;charset=utf-8",
success:function(data)
{
//因为获取到的是一个数组，所以用数组接收
//注意要使用var初始化变量，用int不支持
for(var i=0;i<data.length;i++)
{
alert(data[i].deptId+" "+data[i].deptName);
}
},
error:function()
{
alert("解析失败");
}
});
}
</script>
服务器端Controller中
@RequestMapping("s")
@ResponseBody
public List<Department> showdepart()
{
return departmentService.showdepartment();
}
POST请求：
function fasongdata()
{
$.ajax({
type:"POST",
url:"testdelete",
//data:$('#form1').serialize(),//将提交表单序列化
//contentType:"application/json;charset=utf-8",
data:{id:$("#id").val()},//传入后台数据
success:function(data)
{
if(data.trim()=="success")
{
alert("成功");
}
else
{
alert("失败");
}
},
error:function()
{
alert("解析失败");
}
});
}
表单：
<form id="form1" method="post">
要删除的id：<input type="text" name="id" id="id">
<input type="button" value="删除" id="btn" onclick="fasongdata()">
</form>
Controller中：
@RequestMapping("testdelete")
@ResponseBody
public String testdelete(HttpServletRequest request,HttpServletResponse response)
{
response.addHeader("Access-Control-Allow-Origin", "*");//允许ajax跨域请求
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
int id=Integer.parseInt(request.getParameter("id"));
int i=employeeService.deleteEmp(id);
if (i>0) {
return "success";
}else
{
return "faile";
}
}
Ajax跨域请求：
Get请求
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: 'https://www.apiopen.top/journalismApi',
type: 'GET',
success: function (data) {
//对于json数据有对象类型时可以用eval获取返回值
var json=eval(data)
//看清楚数据是Object类型还是Array类型
$(text).val(json.data.tech[0].title);
}
});
});
});
</script>
<input id="btn" type="button" value="跨域获取数据" />
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
（在服务器端要设置头信息，设置response，和request对象）
POST请求：
function fasongdata()
{
$.ajax({
type:"POST",
url:"http://127.0.0.1:8080/hope/testdelete",
//data:$('#form1').serialize(),//将提交表单序列化
//contentType:"application/json;charset=utf-8",
data:{id:$("#id").val()},//传入后台数据
success:function(data)
{
if(data.trim()=="success")
{
alert("成功");
}
else
{
alert("失败");
}
},
error:function()
{
alert("解析失败");
}
});
}
form表单：
<form id="form1" method="post">
要删除的id：<input type="text" name="id" id="id">
<input type="button" value="删除" id="btn" onclick="fasongdata()">
</form>
Controller中：
@RequestMapping("testdelete")
@ResponseBody
public String testdelete(HttpServletRequest request,HttpServletResponse response)
{
response.addHeader("Access-Control-Allow-Origin", "*");//允许ajax跨域请求
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
int id=Integer.parseInt(request.getParameter("id"));
int i=employeeService.deleteEmp(id);
if (i>0) {
return "success";
}
else
{
return "faile";
}
}