$.ajax()方法的总结

最近在学习如何使用ajax请求后端发送请求，总结如下：

$(function(){

  $("#submit").click(function(){
      var waybillno = $('.waybillno').val()
      console.log(waybillno)
      $.ajax({
          type: "post",
          data: {q: waybillno},
          url: "qrcode",  //生成二维码
          cache: false,
          success: function (){

              $("#code-img").show()
          },
          error:function(){
              alert("请重试！")
          }
      })
      })
      return false
    })

1）type为发送请求的类型：post和get，默认是get

2）URL：要求为string类型的参数，为发送请求的地址，html的Post请求中action对应的url（针对上述代码而言：点击事件涉及哪个函数功能，到urls.py中找岛对应的url），默认为当前页地址。// 确保这里的 URL 与你的 Django URL 配置匹配。

# urls.py
from django.urls import path
from . import views
 
urlpatterns = [
    path('pro_kafka/', views.pro_kafka_view, name='pro_kafka'),

]

$.ajax({
    url: '/pro_kafka/',  // 确保这里的 URL 与你的 Django URL 配置匹配
    type: 'GET',
    success: function(response) {
        console.log(response);
    },
    error: function(error) {
        console.error('Error:', error);
    }
});

3）data：要求为Object或String类型的参数，发送到服务器的数据。key和value将html和view中的post取值结合起来。django项目get或post获取html中的数据是取的name字段的值。其中KEY要用引号引起来，例如：

$('#query_code').click(function () {
            var waybill_no = $('#waybillno').val();
            var select = $('#selectCode').val();
            console.log(waybill_no + select);
            $.ajax({
                type: "POST",
                data: {'wayBillNo': waybill_no, 'selectCode': select},

 <td style="margin: 20px;height: 80px;width: 100px;padding: 60px" id="wx_code" >
            <p align="center" class="title">
                <label style="font-size: 20px;">二维码/条形码生成器</label>
            </p>
            <img id="codeImg" src="" onerror="javascript:this.src='/static/img/6b4ef27c2f148613fb9ab6f512ae9ab4.jpg'" height="200" width="200" style="padding: 1px;" /><br><br>
            <input class="input-group" id="waybillno" placeholder="请输入运单号" type="text" name="wayBillNo "/><br>
            <select class="dropdown" name="selectCode" id="selectCode" >
                <option value="default" selected="selected">请选择</option>
                <option value="qrcode">二维码</option>
                <option value="barcode">条形码</option>
            </select>
            <input class="btn btn-primary" id="query_code" value="查询" type="submit"/>
            <a id="errormsg" style="color: red"></a><br/><br/>

        </td>

def code(request):
    if request.method == 'GET':
        return render(request, 'create_qrcode.html')
    else:
        waybill_no = request.POST.get('wayBillNo')  #获取post请求
        # logger.info('==========' + str(waybill_no))
        select = request.POST.get('selectCode')
        print('********' + str(select))
        if select == 'default' or waybill_no == '':
            ret['code'] = select
            ret['message'] = '请填写完整信息！'
            return HttpResponse(json.dumps(ret))

      如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。

      对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。

      如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

4）cache：要求为Boolean类型的参数，默认为true（当dataType为script和jsonp时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

5）dateType：要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

6)success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
         (1)由服务器返回，并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数
         }

7）error：要求为Function类型的参数，请求失败时被调用的函数。

该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }