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",