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请求中做了一些更改，现在它对我有用。这是代码。试试吧

DATABASECHANGELOG

Answer 3

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

e.preventDefault();

Answer 4

您的代码有2处更改。

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

import foo from './foo'

export {
  foo
}

jquery ajax表单提交编辑值

4 个答案: