jquery ajax表单提交编辑值

Question

我有一个数据表，其中有一个带有编辑按钮的详细信息列。当用户单击编辑时，将 id 作为参数传递。我正在获取该 id 的所有值并在表单中显示。现在，当我使用 PUT 方法编辑值并提交表单时，它被插入到表中，这些值作为参数传递并显示空表单。如何解决这个问题。

HTML：

<form class="container" id="myform" name="myform" novalidate>
  <div class="form-group row">
     <label for="position" class="col-sm-2 col-form-label fw-6">Position</label>
    <div class="col-sm-10">
     <input type="text" class="form-control" id="position" name="position" placeholder="Position" required>
     </div>
   </div>
   <div class="form-group row">
      <label for="location" class="col-sm-2 col-form-label fw-6">Location</label>
      <div class="col-sm-10">
       <input type="text" class="form-control" id="location" name="location" placeholder="Location" required>
       </div>
   </div>
     <div class="form-group row">
       <div class="col-sm-10">
         <button type="submit" class="btn btn-primary">Submit</button>
       </div>
       </div>
 </form>

PUT 方法脚本：

<script type='text/javascript'>
    $(document).ready(function(){
        $("#myform").submit(function(e) {
            var parms = {
                position : $("#position").val(),
                location : $("#location").val()
            };
            var par_val;
            var param_id = new window.URLSearchParams(window.location.search);
            par_val = param_id.get('id');
            console.log(par_val);
            var par_url = par_val;

            $.ajax({
                url: "http://localhost:3000/joblists/"+par_val,
                method: 'PUT',
                async: false,
                dataType : "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(parms),
                success: function(data){
                    console.log('Submission was successful.');
                    console.log(data);
                },
                error: function (data) {
                    console.log('An error occurred.');
                    console.log(data);
                },   
            })
        });
    });
</script>

GET方法脚本：

 <script type="text/javascript">
         $(document).ready(function(){
          var id_val;
          var params = new window.URLSearchParams(window.location.search);
           id_val = params.get('id');
          console.log(id_val);
         var url1=id_val;
          $.ajax({
        url: "http://localhost:3000/joblists/"+id_val,
        type: "GET",
        dataType: "json",

        success: function (data) {
    // alert(JSON.stringify(data));
          console.log(typeof(data));
            $("#position").val(data.position);
            $("#location").val(data.location);

        },
        error: function(data) {
            console.log(data);
        }
      });

    });
 </script>

提交表单后，页面应与编辑表单值保持一致。只应插入已编辑的值。如何做到这一点。

Answer 1

$('#myform').on('submit', function (e) {
e.preventDefault();
..........

Answer 2

我已经在我的编辑器中检查了您的代码。我在 ajax 请求中做了一些更改，现在它对我有用。这是代码。试试看

<script type='text/javascript'>
    $(document).ready(function(){
        $("#myform").submit(function(e) {
            e.preventDefault();
            var parms = {
                position : $("#position").val(),
                location : $("#location").val()
            };
            var par_val;
            var param_id = new window.URLSearchParams(window.location.search);
            par_val = param_id.get('id');
            console.log(par_val);
            var par_url = par_val;

            $.ajax({
                url: "http://localhost:3000/joblists/"+id_val,
                method: 'POST', //or you can use GET
                dataType : "json", //REMOVED CONTENT TYPE AND ASYNC
                data: {send_obj:JSON.stringify(parms)},  //ADDED OBJECT FOR DATA
                success: function(data){
                    console.log('Submission was successful.');
                    console.log(data);
                },
                error: function (data) {
                    console.log('An error occurred.');
                    console.log(data);
                },   
            })
        });
    });
</script>

Answer 3

在表单提交句柄中添加阻止默认值就足够了。您正在通过 ajax 调用处理发布请求。

e.preventDefault();

Answer 4

您的代码有 2 处更改。

此代码将阻止您的页面重新加载，并且您没有以正确的格式发送数据。

$("#myform").submit(function(e) {
      e.preventDefault(); // 1. Dont reload the page
        var parms = {
            position : $("#position").val(),
            location : $("#location").val()
        };
        var par_val;
        var param_id = new window.URLSearchParams(window.location.search);
        par_val = param_id.get('id');
        console.log(par_val);
        var par_url = par_val;

        $.ajax({
            url: "http://localhost:3000/joblists/"+par_val,
            method: 'PUT',
            async: false,
            dataType : "json",
            contentType: "application/json; charset=utf-8",
            data: parms, // 2. Just send the parms object bcoz you already defined the dataType as json so it will automatically convert it into string.
            success: function(data){
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        })
    });