jQuery的ajax的形式编辑值提交(jquery ajax form submit with e

我有一个数据表，我有一个编辑按钮的细节列。 当编辑用户点击我传递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的'）。在（ '提交'，函数（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调用POST请求。

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);
            },
        })
    });

文章来源: jquery ajax form submit with edit values