Web應用基于Ajax進行前后端數據交互,一般利用Get或者Post方式來實現。比較流行的做法是前端提交表單數據,后端處理完畢后返回Json數據到前端進行顯示。
(1)前端:
<script src="{{url_for('static',filename='js/jquery.js')}}"></script><!--Get請求--><script> var data={ 'name':'kikay', 'age':18 } $.ajax({ type:'GET', url:'{{url_for("test.test_get")}}', data:data, dataType:'json',//希望服務器返回json格式的數據 success:function(data){ alert(JSON.stringify(data)); alert(data['test']) } });</script>(2)后端:
@test.route('/test_get/',methods=['POST','GET'])def test_get(): #獲取Get數據 name=request.args.get('name') age=int(request.args.get('age')) #返回 if name=='kikay' and age==18: return jsonify({'result':'ok'}) else: return jsonify({'result':'error'})抓包:
(1)前端:
<script src="{{url_for('static',filename='js/jquery.js')}}"></script><!--Post請求--><script> var data={ 'name':'kikay', 'age':18 } $.ajax({ type:'POST', url:'{{url_for("test.test_post")}}', data:data, dataType:'json',//希望服務器返回json格式的數據 success:function(data){ alert(JSON.stringify(data)); } });</script>(2)后端:
@test.route('/test_post/',methods=['POST','GET'])def test_post(): #獲取POST數據 name=request.form.get('name') age=int(request.form.get('age')) #返回 if name=='kikay' and age==18: return jsonify({'result':'ok'}) else: return jsonify({'result':'error'})抓包:
(1)前端:
如果前端要向后端提交Json格式的數據,需要設置content-type參數為application/json,并且將data參數設置為字符串形式。
<script src="{{url_for('static',filename='js/jquery.js')}}"></script><!--Json--><script> var data={ 'name':'kikay', 'age':18 } $.ajax({ type:'POST', url:'{{url_for("test.test_json")}}', data:JSON.stringify(data), //轉變傳遞的參數為字符串格式 contentType:'application/json; charset=UTF-8', //指定傳遞給服務器的是Json格式數據 dataType:'json',//希望服務器返回json格式的數據 success:function(data){ alert(JSON.stringify(data)); } });</script>(2)后端:
@test.route('/test_json/',methods=['POST','GET'])def test_json(): #獲取JSON數據 data=request.get_json() name=data.get('name') age=int(data.get('age')) #返回 if name=='kikay' and age==18: return jsonify({'result':'ok'}) else: return jsonify({'result':'error'})抓包:
新聞熱點
疑難解答