如果使用模态对话框实现增删改查，一旦提交Form表单，页面就会刷新。而使用Ajax可以将表单内容发到后台而页面不刷新。

  • 实现：( by jQuery)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $.ajax({
        url: '要提交的网址',
        type: 'POST'  // 或GET
        data: {'k1': 'v1','k2':'v2'},	// 提交的数据
        dataType: 'JSON',			// 相当于JSON.parse(字符串)
        traditional: true,			// 传输数据有列表，需要加上，但不支持字典，需要对字典进行 stringify
        success: function(data) {
        	// 当前服务端处理完毕后，自动执行的回调函数
        	// data为返回的数据
        	// JSON.parse(字符串) --> 对象
          // JSON.stringify(对象) --> 字符串
    	}
    })

  • 这种情况，我们需要通过js来实现页面跳转：

1
2
location.href = "要跳转的地址";
location.reload();		// 跳转回本页面

  • 模态对话框一般用于：少量输入框和数据的场景。新URL方式一般用于操作多、(打广告)、数据多等场景

  • 携带CSRF：

  1. 放在data中携带
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form method="POST" action="...">
    {% csrf_token %}
    <input id="user" />
    <a onclick="submitForm();">Ajax提交</a>
</form>
<script src=".../jquery.js"></script>
<script>
function submitForm() {
    var csrf = $('input[name="csrfmiddlewaretoken"]').val();
    var user = $('#user').val();
    $.ajax({
        url: '...',
        type: 'POST',
        data: {"user":user, 'csrfmiddlewaretoken':csrf},
        success: function(arg){
            console.log(arg);
        }
    })
}
</script>
  1. 放在请求头中携带
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form method="POST" action="...">
    {% csrf_token %}
    <input id="user" />
    <a onclick="submitForm();">Ajax提交</a>
</form>
<script src=".../jquery.js"></script>
<script src=".../jquery.cookie.js"></script>  <!-- 专门处理cookie,无需自己分割  -->
<script>
function submitForm() {
    var token = $.cookie('csrftoken');
    var user = $('#user').val();
    $.ajax({
        url: '...',
        type: 'POST',
        headers:{'X_CSRFToken':token},
        success: function(arg){
            console.log(arg);
        }
    })
}
</script>