时间戳

首页 > 解决方案 > 通过替换字段名称使用 jquery ajax 发送表单数据

javascript - 通过替换字段名称使用 jquery ajax 发送表单数据

问题描述

我有带有前缀 post_ 的字段名称的表单。

例如 post_url。

我需要将 post_url 替换为 url，然后所有字段都相同，并且必须通过 ajax 表单数据发送。

    var postData=$("#post_requestform").serialize();
console.log(postData);
var res = postData.split("&");
var str = "";
var str1=[];
for(i=0;i<res.length;i++)
  {
    var key=res[i].split("=")[0];
    var val=res[i].split("=")[1];console.log(val);
    key=key.replace("post_","");
    str += key + "=" + val+ "&";
     str1[key]=val;
  }




       $.ajax({

url : "{{route('request.save')}}" ,

method: "POST",
  // traditional: true,

data :str, // post data || get data
// async: false,
// processData: false,
// contentType: false,

//data : { _token: '{{csrf_token()}}' },

error: function(data){

  console.log(data);

  toastr.error("Error Occured. Please Try Again Later.");

},

success : function(result){

  result = JSON.stringify(result)

 console.log(result);
}
});

但是表单数据没有传入 ajax。请帮忙。

谢谢，萨尼莎

标签： javascriptjqueryajax

解决方案

首先使用 $("form").serializeArray(); 然后您将以数组的形式获取表单值，然后执行所需的替换过滤器并准备 URI 编码的字符串:)

$(function(){
$("#user_form").submit(function(){
    var formValues = $("#user_form").serializeArray();
    var postData = "";
    for(let prop of formValues){
        if (postData != "") {
            postData += "&";
    }
    postData += prop.name.replace("post_","") + "=" + encodeURIComponent(prop.value);
    }
    console.log(postData);
});
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>
    
    <form action="javascript:void(0)" id="user_form">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="post_fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="post_lname" value="Doe"><br>
        <label for="age">Age:</label><br>
        <input type="text" id="age" name="post_age" value="23"><br><br>
        <input type="submit" value="Submit">
    </form> 

</body>
</html>

推荐阅读