使用 jquery ajax 的 post 方法

Question

大家好，我有以下代码：我的代码

我正在尝试在 ajax 上做简单的发布方法，但我有一些困难。

首先，我在 select 上有 4 个输入（姓名、邮件、电话和国家/地区），带有一些选项和文本区域。

    <form id="sendMessage">
         <input type="text" name="name" class="name form-control" placeholder="name" required>
         <input type="email" name="mail" class="email form-control" placeholder="mail" required>
         <input type="number" name="phone" class="phone-number form-control" placeholder="phone" 
           required>
         <input type="text" name="country" class="country form-control" placeholder="country" 
           required>
         <select name="theme" required>
           <option value="">choose theme</option>
           <option value="greenColor">green</option>
           <option value="redColor">red</option>
           <option value="blueColor">blue</option>
           <option value="otherColor">something else...</option>
         </select>
         <textarea class="textBody form-control" placeholder="Сообщение" rows="5" name="message" 
           required></textarea>
         <button type="submit" name="submit"  >Send</button>
     </form>

场景如下，当用户填写所有字段时，我想在提交按钮后将所有信息发送到后端，但出现问题。

    $("#sendMessage button").on("click", (e) => {
    e.preventDefault();
    let isOk = true;

    let name = $("#sendMessage .name")[0].value;
    if (name) isOk = true;
    isOk = false;

    let email = $("#sendMessage .email")[0].value;
    if (email) isOk = true;
    isOk = false;

    let phoneNumber = $("#sendMessage .phone-number")[0].value;
    if (phoneNumber) isOk = true;
    isOk = false;

    let country = $("#sendMessage .country")[0].value;
    if (country) isOk = true;
    isOk = false;

    let textBody = $("#sendMessage .textBody")[0].value;
    if (textBody) isOk = true;
    isOk = false;

    if (isOk) {
    $.ajax({
      url: "api/Guest/SendEmailForContact",
      method: "POST",
      xhrFields: {
        withCredentials: true
      },
      statusCode: {
        404: function () {
          alert("page not found");
        }
      },
      context: {}
    }).done(function () {
      console.log(":asdfasdfasdf");
    });
    }
  });

请帮我解决这个问题。 谢谢

Answer 1

$.ajax永远不会运行，因为您在if语句之前将isOk设置为 false。 进行此验证的更好方法是首先将isOk设置为 true，然后在任何值无效时将其设置为 false。

Answer 2

您可以先尝试将默认值设置为false ，然后可以使用Boolean一起检查该值。 我还建议您使用修剪值。

请注意：您的代码中没有对select元素进行验证。

演示：

 $("#sendMessage button").on("click", (e) => { e.preventDefault(); let isOk = false; let name = $("#sendMessage.name").val().trim(); let email = $("#sendMessage.email").val().trim(); let phoneNumber = $("#sendMessage.phone-number").val().trim(); let country = $("#sendMessage.country").val().trim(); let textBody = $("#sendMessage.textBody").val().trim(); isOk = Boolean(name) && Boolean(email) && Boolean(phoneNumber) && Boolean(country) && Boolean(textBody); if (isOk) { console.log(isOk); //ajax code here } else{ console.log(isOk); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="sendMessage"> <input type="text" name="name" class="name form-control" placeholder="name" required> <input type="email" name="mail" class="email form-control" placeholder="mail" required> <input type="number" name="phone" class="phone-number form-control" placeholder="phone" required> <input type="text" name="country" class="country form-control" placeholder="country" required> <select name="theme" required> <option value="">choose theme</option> <option value="greenColor">green</option> <option value="redColor">red</option> <option value="blueColor">blue</option> <option value="otherColor">something else...</option> </select> <textarea class="textBody form-control" placeholder="Сообщение" rows="5" name="message" required></textarea> <button type="submit" name="submit" >Send</button> </form>