带有 javascript 的 HTML 表单不起作用 - AJAX POST 数据未发送到 PHP答案

【问题标题】：HTML Form with javascript not working - AJAX POST data is not sending to PHP带有 javascript 的 HTML 表单不起作用 - AJAX POST 数据未发送到 PHP
【发布时间】：2018-06-27 20:46:12
【问题描述】：

Javascript 代码：

 $("#musteriEkleBtn").on("click", function(){
        var zp = $("#musteriEkleForm").serialize();
        $.ajax({
            url: "tsettings/islem.php?islem=mKayit",
            type: "POST",
            data: zp,
            success: function(cevap){
                $("#musteriEkleAlertSuccess").html(cevap).hide().fadeIn(700);
            }       
        });
    });

HTML 表单示例：

<form id="musteriEkleForm" method="POST">

    <li>
    <label>Adınız :</label>
    <input placeholder="Adınızı yazın." type="text" name="musteri_isim">
    <i class="zirvepin-icon zirvepin-user"></i>
    </li>

    <li class="zirvepin">
    <input id="musteriEkleBtn" type="submit">Register</input>
    </li>   
</form>

这个 html 输入提交按钮不起作用，我怎样才能使这个代码起作用？

所以表单数据需要访问islem.php文件，但是表单数据没有到islem.php。

islem.php 文件：

if(g('islem') == 'mKayit') {

    echo"<script type='text/javascript'> alert('Evet Çalışıyor'); </script>";

}

感谢所有帮助我解决这个问题的人，感谢通过 stackexchange fix 帮助解决问题的朋友。

如果您遇到同样的问题，我会留下一个适合您的代码，感谢此代码，您将摆脱困境：

$("#musteriKayitForm").submit(function(event){
    var istek;

    // Verileri güvenli bir şekilde savun. Varsayılan gönderimi kontrol et.
    event.preventDefault();

    // Bekleyen istekleri iptal et.
    if (istek) {
        istek.abort();
    }

    // Bazı yerel değişkenleri burada kuruyorum.
    var $form = $(this);

    // Tüm alanları seçip önbelleğe alıyorum.
    var $inputs = $form.find("input, select, button, textarea");

    // Verileri formda serileştir
    var serializedData = $form.serialize();

    // Ajax talebinin süresi için girdileri devre dışı bırakalım.
    // Not: form verilerinin serileştirilmesinden sonra öğeleri devre dışı bırakırız.
    // Devre dışı form öğeleri serileştirilmeyecektir.
    $inputs.prop("disabled", true);

    $.ajax({
      type: 'post',
      url: 'tsettings/islem.php?islem=mKayit',
      data: serializedData,
      success: function(cevap){ $("#musteriKayitAlertSuccess").html(cevap).hide().fadeIn(700); }    
    });

    // Başarıya çağrılacak geri arama işleyicisi
    istek.done(function (response, textStatus, jqXHR){
    // Konsola mesaj gönder
        console.log("Hooray, it worked!");
    });

    // Arızada çağrılacak geri arama işleyicisi
    istek.fail(function (jqXHR, textStatus, errorThrown){
    // Hatası konsola kaydet
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });

    // İstenmeden çağrılacak geri arama işleyicisi
    // İstek başarısız oldu veya başarılı olduysa
    istek.always(function () {
    // Girişleri etkinleştir
    $inputs.prop("disabled", false);
    });

});

【问题讨论】：

它怎么不工作它做错了什么？
请定义“此 html 输入提交按钮不起作用”。您看到网络选项卡中发出的 ajax 调用了吗？永远不会发行吗？是不是填不存在的字段musteriEkleAlertSuccess？您在控制台中遇到错误吗？请详细说明
Javascript 代码正在运行，我可以发出我想发出的警报。我在发布 islem.php 时遇到了麻烦。所以表单数据需要访问islem.php文件，但是表单数据没有到islem.php。
你应该使用event.preventDefault()，否则会出现正常的表单提交。
islem.php在哪里？

标签： javascript php html forms submit

【解决方案1】：

正如Barmar 所说，您应该使用event.preventDefault()，这样表单就不会提交给自己，Javascript 将能够完成他的工作。

【讨论】：

Mathieu 如何在我的 javascript 代码中使用 event.preventDefault() 函数？

【解决方案2】：

感谢所有帮助我解决这个问题的人，感谢通过 stackexchange fix 帮助解决问题的朋友。

如果您遇到同样的问题，我会留下一个适合您的代码，感谢此代码，您将摆脱困境：

$("#musteriKayitForm").submit(function(event){
    var istek;

    // Verileri güvenli bir şekilde savun. Varsayılan gönderimi kontrol et.
    event.preventDefault();

    // Bekleyen istekleri iptal et.
    if (istek) {
        istek.abort();
    }

    // Bazı yerel değişkenleri burada kuruyorum.
    var $form = $(this);

    // Tüm alanları seçip önbelleğe alıyorum.
    var $inputs = $form.find("input, select, button, textarea");

    // Verileri formda serileştir
    var serializedData = $form.serialize();

    // Ajax talebinin süresi için girdileri devre dışı bırakalım.
    // Not: form verilerinin serileştirilmesinden sonra öğeleri devre dışı bırakırız.
    // Devre dışı form öğeleri serileştirilmeyecektir.
    $inputs.prop("disabled", true);

    $.ajax({
      type: 'post',
      url: 'tsettings/islem.php?islem=mKayit',
      data: serializedData,
      success: function(cevap){ $("#musteriKayitAlertSuccess").html(cevap).hide().fadeIn(700); }    
    });

    // Başarıya çağrılacak geri arama işleyicisi
    istek.done(function (response, textStatus, jqXHR){
    // Konsola mesaj gönder
        console.log("Hooray, it worked!");
    });

    // Arızada çağrılacak geri arama işleyicisi
    istek.fail(function (jqXHR, textStatus, errorThrown){
    // Hatası konsola kaydet
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });

    // İstenmeden çağrılacak geri arama işleyicisi
    // İstek başarısız oldu veya başarılı olduysa
    istek.always(function () {
    // Girişleri etkinleştir
    $inputs.prop("disabled", false);
    });

});

【讨论】：