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

下面这个例子展示了如何使用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",