如何在javascript中编写更改函数？

我想使用javaScript-ajax发布带有body的请求

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

对于复选框，如果选中，则其值为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>

---

我的第一条建议是使用jquery在javascript中分配

onSubmit

，而不是在html中，这样您就可以：

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

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

这样使用

FormData

相当于发布一个对象，其中每个键都是输入的

name

属性，值就是输入的值

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

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

如果可以，让

FormData

类为您完成繁重的工作

---

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

await axios.post(url, formData);

---

您应该为所有输入添加name属性。然后，您可以通过向表单添加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()
    });
  });
});

$（文档）.ready（函数（）{
$（'#form1'）。提交（函数（e）{
e、 预防默认值（）；
$.ajax({
url:“”，
方法：“POST”，
数据：$（'#form1'）。序列化（）
});
});
});

要使用axios，我需要先下载吗？axios的安装方式与jquery相同——如果有，您可以将其作为构建过程的一部分，也可以将其包含在

脚本

标记中，网址为：

https://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js

await axios.post(url, formData);

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

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