Javascript jquery ajax表单提交和编辑值

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

HTML:

放置方法脚本：

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

获取方法脚本：

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

---

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

$'myform'。在'submit'上，函数e{ e、 防止违约；

---

我已经在我的编辑器中检查了你的代码。我在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>

---

您的代码中有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);
            },
        })
    });

---

在表单提交句柄中添加prevent default就足够了。您正在通过ajax调用处理post请求

e.preventDefault();

---

一种解决方案是，您可以在获得成功响应后重新加载页面，即location.reload；@Swati我已经尝试过，但它显示的是空表单您是否正在从数据库中显示表单中的值？我正在从数据库中获取值。问题是提交后，值将作为url中的参数传递。因此，我无法显示e提交后表单中的值但我在您的表单中没有找到任何数据库代码？尝试发布您的完整代码我已经尝试过如果我应用此预防措施默认情况下它没有插入值您可以在工作列表中获取参数方法没有..如果您获取参数，请检查您的插入查询实际上我正在获取值，也正在插入。问题是提交表单后，表单的值应保持不变。但在这里，提交后的值通过参数传递，因此它显示为空form@lakshmipriya这是因为您尚未编写任何逻辑来再次获取和填写表单。请按id从db获取更新的值，并在输入值中显示一些简单值如果我添加它，则我不提交表格是的，完全正确。你不需要提交表格，因为你自己处理你的帖子。我找到了我们应该使用的解决方案。是的，完全正确。

e.preventDefault();