实现功能
前端向后端跨域发出请求,将小写字母转为大写,动态添加到网页。
服务器端(python-Django)
def upWords(request):
# get方法
callBack = request.GET.get('callback')
# 返回时建议使用占位符拼接,不然会解析错误
return HttpResponse("%s('%s')" % (callBack, request.GET['value'].upper()))
启动django工程
python manage.py runserver 0.0.0.0:8080
客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script src="jquery-1.12.2.js"></script>
<script src="AJax.js"></script>
</head>
<body>
<div>
<p>输入: <input type="text" id="ipt"></p>
<input type="button" value="提交" id="btn">
<div>
<p>结果:<span id="res"></span></p>
</div>
</div>
</body>
</html>
- 原生JS实现
window.onload = function () {
var btn = document.getElementById('btn');
btn.onclick = function () {
var ipt = document.getElementById('ipt');
var script = document.createElement('script');
script.src = "http://10.2.0.200:8080?callback=callBack&value=" + ipt.value;
document.head.appendChild(script);
document.head.removeChild(script);
};
};
function callBack(arg) {
console.log(arg);
var res = document.getElementById('res');
res.innerText = arg;
}
- jquery实现
$(function () {
$("#btn").click(function () {
$.ajax({
url: "http://10.2.0.200:8080",
dataType: "jsonp", // 必填,没有会出现跨域
jsonpCallback: "callBack", // 回调函数的名字
data: "value=" + $("#ipt").val(), // 传递的参数
success: function (arg) {
console.log(arg);
$("#res").text(arg);
}
})
})
});