Ajax 无法正常工作

Question

我正在尝试从 AJAX 发布成功函数以释放验证函数。它工作正常，因为它正在访问我自己的 API，我可以看到它正在访问 URL，并且服务器正在输出 HTTP 200。

但我需要我的 AJAX 函数在同一页面中运行并使用警报进行验证。

脚本

var $form = $('#formDiaDosPais');
var dados = {};
dados.Nome = $form.find("input[name='Nome']").val();
dados.Email = $form.find("input[name='Email']").val();
dados.Genero = genero;
dados.Origem = $form.find("input[name='Origem']").val();

$.ajax({
    type: "POST",
    url: 'http://www.website.com.br/api/cadastroNewsletter',
    data: dados,
}).done(function () {
    alert('E-mail cadastrado');
}).fail(function (XMLHttpRequest, textStatus, errorThrown) {
    alert('E-mail já está cadastrado');
})

HTML

<form id="formDiaDosPais" action="http://www.website.com.br/api/cadastroNewsletter" method="post">
    <!-- EMAIL -->
    <div>
        <input placeholder="Digite seu email aqui" type="text" name="Email" id="email" value="" tabindex="1" />
    </div>
    <!-- GENERO -->
    <div style="margin:18px 0 0 0; font-size:14px;" class="left">
        <input type="radio" name="Genero" id="gender_male" tabindex="2" value="masculino" checked="checked" />
        <label for="sexoid1">Homem</label>
        <input style="margin:0 0 0 5px;" type="radio" name="Genero" id="gender_female" tabindex="3" value="feminino" />
        <label for="sexoid2">Mulher</label>
    </div>
    <!-- ORIGEM E NOME -->
    <div style="margin:18px 0 0 0; font-size:13px;" class="right">
        <input type="hidden" name="Origem" value="Newsletter" />
        <input type="hidden" name="Nome" value="" />
        <!-- ORIGEM -->
        <input type="checkbox" value="Cadastrar" name="termos" id="chkterms" checked="checked" />
        <label for="chkterms">Li e aceito os <a href="http://www.centauro.com.br/sc/termosdeuso" target="_blank" class="link-termos">Termos</a>
        </label>
    </div>
    <input type="submit" class="btn right" value="Cadastrar" class="submit">
</form>

Answer 1

如果我理解正确，你有一个submit按钮，如果你点击它，它会提交表单。

您在代码中的某处设置了 ajax 调用这一事实不会阻止按钮提交它。您必须手动阻止按钮的默认行为并改为发送和 ajax 请求，例如

$("input[type='submit']").click(function(e){
  e.preventDefault(); // prevent form submission
  var $form = $('#formDiaDosPais');
  var dados = {};
  dados.Nome = $form.find("input[name='Nome']").val();
  dados.Email = $form.find("input[name='Email']").val();
  dados.Genero = genero;
  dados.Origem = $form.find("input[name='Origem']").val();
  $.ajax({ // send ajax instead
     type: "POST",
     url: 'http://www.website.com.br/api/cadastroNewsletter',
     data: dados,
     }).done(function () {
          alert('E-mail cadastrado');
     }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
          alert('E-mail já está cadastrado');
  })

})