对于form表单，如何在点击按钮后先做非空的填写校验，校验通过后再提交ajax请求

可以通过以下步骤实现：

1. 给提交按钮添加一个点击事件的监听器。

2. 在监听器中获取表单中需要进行非空校验的输入框元素，使用 JavaScript 的非空校验函数或正则表达式进行校验。

3. 如果校验通过，再使用 Ajax 发送请求。如果校验不通过，弹出提示框提示用户填写必填项。

下面是一个示例代码：

<form id="myForm" action="submit.php" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email"><br>

  <label for="message">留言：</label>
  <textarea id="message" name="message"></textarea><br>

  <button type="submit" id="submitBtn">提交</button>
</form>

<script>
  document.getElementById('submitBtn').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止表单默认提交行为

    // 获取需要校验的输入框元素
    var nameInput = document.getElementById('name');
    var emailInput = document.getElementById('email');
    var messageTextarea = document.getElementById('message');

    // 非空校验
    if (nameInput.value.trim() === '') {
      alert('请填写姓名');
      nameInput.focus();
      return;
    }
    if (emailInput.value.trim() === '') {
      alert('请填写邮箱');
      emailInput.focus();
      return;
    }
    if (messageTextarea.value.trim() === '') {
      alert('请填写留言');
      messageTextarea.focus();
      return;
    }

    // 发送 Ajax 请求
    var xhr = new XMLHttpRequest();
    xhr.open('post', 'submit.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          alert('提交成功！');
          document.getElementById('myForm').reset(); // 清空表单
        } else {
          alert('提交失败！');
        }
      }
    };
    xhr.send('name=' + encodeURIComponent(nameInput.value) +
             '&email=' + encodeURIComponent(emailInput.value) +
             '&message=' + encodeURIComponent(messageTextarea.value));
  });
</script>