JS获取页面数据执行Ajax请求

Posted 2020-10-26 Suraer

下面这个例子展示了如何使用js获取页面中元素的值，并且将这些值作为参数执行Ajax请求。

$("#submit-task").bind("click", function (event) {
    event.preventDefault();
    event.stopPropagation();
    if(validate() == false){
        exit;
    }
    var submitBtn = this;
    // 禁止提交按钮
    $(submitBtn).attr('disabled', 'disabled');

    var formData = new FormData($('#task-form')[0]);

    var task_id = $("input#task_id").val();

    var type = "PUT";
    var url = '/api/v1/task/task/update/'+task_id;

    $.ajax({
            type:type,
            url: url,
            data: formData,
            contentType: false,
            cache: false,
            async:false,
            processData:false,
            success: function(data){
                layer.msg("任务创建成功");
                // 成功后跳转到首页
                window.location.href = "/task/list";
            },
            error: function(err){
                console.log(err);
                layer.msg("提交失败，失败原因：" + err.responseText);
                // 让提交按钮重新有效
                $(submitBtn).removeAttr('disabled');
            }
        });
});

function validate() {
    var fields = {
        'plan_name': '计划名称',
        'product_url': '商品链接',
        'shop_name': '店铺名称',
        'shop_id': '店铺ID',
        'product_id': '商品ID',
    };
    for (var fiels in fields){
        var obj = document.getElementsByName(fiels)[0];
        if(obj.value == null || obj.value == ""){
            obj.focus();
            alert(fields[fiels] + "不能为空");
            return false;
        }
    }
    return true;
}

• 获取表单中所有元素的值

  var formData = new FormData($('#task-form')[0]);

  task-form是form标签的id值，值得注意的是获取表单数据是根据元素的name属性来获取，在后台获取传过去的值时，类似于将name属性的值作为键，将value属性的值作为值来处理。

• 获取单个元素的值

  var task_id = $("input#task_id").val();
  var search = $("input[name='search']").val();
  var username = $("#register-form input[name='username']").val();
  var obj = document.getElementsByName('name')[0].value;

• 上面的数据采用的是表单格式，也可以使用Json格式

  // 构造参数
  var data = {
  task: 'task',
  action: 'action',
  times: 'times'
  }

  // 配置ajax参数
  data: JSON.stringify(data),
  contentType: "application/json",