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

Posted Suraer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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",

以上是关于JS获取页面数据执行Ajax请求的主要内容,如果未能解决你的问题,请参考以下文章

如何通过php的curl模拟ajax请求,获取其返回值

ajax获取数据后怎么去渲染到页面

scrapy实战4抓取ajax动态页面(以糗事百科APP为例子):

thinkphp怎样获取ajax请求数据

Ajax同步异步请求

我想问一下如何获取ajax传过来的数据,比如在.cs或者在jsp页面获取ajax传过来的数据,然后写入数据库。