如何在javascript中编写更改功能？答案

【问题标题】：How to write on change function in javascript?如何在javascript中编写更改功能？
【发布时间】：2020-09-29 08:53:09
【问题描述】：

我想使用 javaScript ajax 发布带有正文的请求

如何在复选框、日期和名称上应用 Onchange 函数并将此数据发送到发布请求

对于复选框，如果选中则其值为 true，如果未选中则为 false

    <form onsubmit="sectionWork()">
        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <div class="form-group">
            <label for="exampleInputDate">Date</label>
            <input type="date" id="exampleInputDate" name="date">
        </div>
        <div class="form-group">
            <label for="exampleName">Name</label>
            <input type="text" aria-placeholder="Enter Name"  name = "naming" class="form-control" id="naming" >
        </div>

        <button type="submit" class="btn btn-primary">Releasing</button>
    </form>

这里是javascript

        const sectionWork= () => {
        
        let body = {
             Checkbox: null,
             Date: null,
             name: null
        }
        
        $.ajax(url,
            {
                type : 'post',
                data : body,
                success: function (response) {   // success callback function
                    console.log(response)
                },
                error: function (error) { // error callback
                    console.log(error)
                    $('#p').append('Error: ' + error);
                }
            });

        }

【问题讨论】：

标签： javascript ajax

【解决方案1】：

我的第一条建议是使用 jquery 在 javascript 中分配 onSubmit，而不是在 html 中，所以你会得到这个：

// html:
<form id="section-work">

// javascript
$('form#section-work').submit(function() {
   // code here
});

我的第二条建议是滥用 FormData 类，而不是手动创建要发布的数组：

// javascript
$('form#section-work').submit(function() {
   const formData = new FormData($(this)[0]);
   $.ajax({
        type: "POST",
        url: postDataUrl,
        data: formData,
        ...
   });
});

当您像这样使用FormData 时，这相当于发布一个对象，其中每个键是您输入的name 属性，值是您输入的值。

因此，如果您的表单中有这些输入：

<input type="checkbox" name="test-checkbox" />
<input type="text" name="test-text" />
<input type="date" id="exampleInputDate" name="date" />

.. 那么你提交的 json 会是这样的

{
   'test-checkbox' : true, // true if it is checked, or maybe it says 'on', i'm not sure
   'test-text' : 'abcd', // or whatever they wrote in the text field
   'date' : '2020-09-29' // not exactly sure how a date input submits, but it's probably in text form, ISO8601
}

如果可以的话，让FormData 类为您完成繁重的工作

最后一条建议：使用 Axios 而不是 jQuery.Ajax，因为 Axios 使用开箱即用的 promises/async-await。这种模式要好得多：

await axios.post(url, formData);

【讨论】：

使用axios需要先下载吗？
axios 可以像 jquery 一样安装——如果你有的话，你可以把它作为构建过程的一部分，或者你可以把它包含在 script 标签中，在这个 url ：https://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

【解决方案2】：

您应该为所有输入添加名称属性。然后你可以通过添加一个 id 来监听表单的提交事件。添加e.preventDefault() 以防止通过 HTML 提交表单然后发送 AJAX。我是用 jQuery 做的，因为你已经用过了。

<form id="form1">
    <div class="form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1" name="check">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
    </div>
    <div class="form-group">
        <label for="exampleInputDate">Date</label>
        <input type="date" id="exampleInputDate" name="date">
    </div>
    <div class="form-group">
        <label for="exampleName">Name</label>
        <input type="text" aria-placeholder="Enter Name" name="naming" class="form-control" id="naming">
    </div>

    <button type="submit" class="btn btn-primary">Releasing</button>
</form>

然后是JS部分：

$(document).ready(function () {
  $('#form1').submit(function (e) {
    e.preventDefault();
    $.ajax({
      url: '<your-url>',
      method: 'POST',
      data: $('#form1').serialize()
    });
  });
});

【讨论】：