HTML提交表单

一.使用form提交表单

<form action="#" method="post">
    {% csrf_token %}
    班级<input name="class" type="text" placeholder=" 班级">
    <input id="cancel" type="button" value="取消">
    <input type="submit" value="提交">
</form>

二.使用ajax

1.使用原生的ajax(JavaScript):

function fun1(self) {
    {#    第一步创建一个xmlhttprequest对象#}
    var xmlhttp = new XMLHttpRequest();

    {#    第二步,绑定发送的url以及发送方式#}
        xmlhttp.open("get","{% url '1' %}?name="+self.value,true);
{#    xmlhttp.open("post",{% url '1' %},true);#}

    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

     xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            var data = xmlhttp.responseText;
{#            console.log(data)#}
            document.getElementById('check').innerText=data
        }
    };

{#    第三步,发送数据,get的时候发送为null#}
    xmlhttp.send('name="123');

}

2.使用jQuery提供的post/get方法

get

    function fun1(self) {
        $.get('{% url "`1" %}',{name:self.value.trim()},function (data) {
            console.log(data);
                alert(data);
                $("#error").text(data)
            })
    }

post

   function fun1(self) {
        $.post('{% url "1" %}', {name: self.value.trim()}, function (data) {
            console.log(data);
            alert(data);
            $("#error").text(data)
        })
    }

原生(建议)

  function fun1() {
        $.ajax({
            {# 设置url#}
            url: '{% url "1" %}',
            {# 设置data----发送的数据#}
            data: {a: 1, b: 2},
            {# 设置请求类型#}
            type: "GET",
            {# 成功时候执行的函数#}
            success: function (data) {
            },

　　　　　　　　

dataType : 'json',
beforeSend: function(request) {
request.setRequestHeader("ajaxFunction", "true");

},

            {# 失败时候执行的函数#}
            error: function (jqXHR, textStatus, err) {
                // jqXHR: jQuery增强的xhr
                // textStatus: 请求完成状态
                // err: 底层通过throw抛出的异常对象，值与错误类型有关
                console.log(arguments);
            },
            {# 任何时候执行的函数#}
            complete: function (jqXHR, textStatus) {
                // jqXHR: jQuery增强的xhr
                // textStatus: 请求完成状态 success | error
                console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
                console.log('textStatus: %s', textStatus);
            },
            {# 根据状态码#}
            statusCode: {
                '403': function (jqXHR, textStatus, err) {
                    console.log(arguments);  //注意：后端模拟errror方式：HttpResponse.status_code=500

                },
                '400': function () {
                }
            }

        })
    }