无法在不刷新页面的情况下通过 jquery ' post 函数将数据发送到 php 脚本


Unable to send data to php script via jquery ' post function without refreshing the page?

我有一个表格,如果不刷新页面,我不想提交。我不想从这个表格中得到结果并在同一页面中使用它。

表单在我的客户表中添加了一行,所以我想做的是获取这个插入行的 ID 并在同一页面中使用它。

我遇到的问题是我的jquery代码不起作用,我想我的$.post(..)部分有问题,但我似乎无法弄清楚它是什么。

网页代码:

<form id='FormAjoutNewClient' class="form-style-9">
        <img class="PointerCursor CloseNouveauClient" width="16" src="#">
        <h2 class='titelAJoutNwClient' >New Client </h2>
            <ul>
                <li>
                    <input type="text" name="NomNouveauClient" class="field-style field-split align-left requiNouveauClient NomNouveauClient" placeholder="Nom" />
                    <input type="text" name="PrenomNouveauClient" class="field-style field-split align-right requiNouveauClient PrenomNouveauClient" placeholder="Prenom" />
                </li>
                <li>
                    <input type="email" name="EmailNouveauClient" class="field-style field-split align-left requiNouveauClient EmailNouveauClient" placeholder="Email" />
                    <input type="number" name="TelNouveauClient" class="field-style field-split align-right requiNouveauClient TelNouveauClient" placeholder="Telephone" />
                </li>
                <li>
                    <input type="text" name="EntrepriseNouveauClient" class="field-style field-full align-none requiNouveauClient EntrepriseNouveauClient" placeholder="Entreprise..." />
                </li>
                <li>
                    <input type="text" name="AdrssLine1NouveauClient" class="field-style field-full align-none requiNouveauClient AdrssLine1NouveauClient" placeholder="Adresse Ligne 1" />
                </li>
                <li>
                    <input type="text" name="AdrssLine2NouveauClient" class="field-style field-full align-none AdrssLine2NouveauClient" placeholder="Adresse Ligne 2" />
                </li>
                <li>
                    <input type="number" name="CodePostalNouveauClient" class="field-style field-split align-left requiNouveauClient CodePostalNouveauClient" placeholder="Code Postal" />
                    <input type="text" name="VilleNouveauClient" class="field-style field-split align-right requiNouveauClient VilleNouveauClient" placeholder="ville" />
                </li>
            <!-- Bouton Ajouter Nouveau Client  -->
                <li>
                    <center><input type="button" name='AjoutClient' class='AjoutNewClient' value="Ajouter client" /></center>
                </li>
            </ul>
        </form>

我的 JQuery 代码:

$('body').on('click', '.AjoutNewClient', function(event) {       
                 var EmailNCF       = $(".EmailNouveauClient").val();
                 var TelNCF         = $(".TelNouveauClient").val();
                if (EmailNCF == '' || TelNCF == '' ) {
                    alert("please fill all required fields");
                    }
                 else {
                    $.post("../formsTraitements/FormAddClient.php", {
                        EmailNC: EmailNCF,
                        TelNC: TelNCF
                    }, function(data) {
                        alert(data);
                        $('#FormAjoutNewClient').reset(); // To reset form fields
                    });
                }

我的php代码非常简单:

$EmailNC        =   $_POST['EmailNC'];
$TelNC          =   $_POST['TelNC'];
        $query = mysqli_query(" INSERT INTO MyTable VALUES ('$EmailNC','$TelNC')"); 
        if($query){
            echo "added.";
            }
        mysql_close($connexion);

我还没有尝试过,但试试这个:

$.post("../formsTraitements/FormAddClient.php", {
                    EmailNC: EmailNCF,
                    TelNC: TelNCF
                }, function(data) {
                    alert(data);
                    $('#FormAjoutNewClient').reset(); // To reset form fields
                });

只需在函数(数据)之前添加","并更改电子邮件NCF参数的名称

编辑

我试过这个:

网页代码 :

<form id='FormAjoutNewClient' class="form-style-9">
    <img class="PointerCursor CloseNouveauClient" width="16" src="#">
    <h2 class='titelAJoutNwClient' >New Client </h2>
        <ul>
            <li>
                <input type="text" name="NomNouveauClient" class="field-style field-split align-left requiNouveauClient NomNouveauClient" placeholder="Nom" />
                <input type="text" name="PrenomNouveauClient" class="field-style field-split align-right requiNouveauClient PrenomNouveauClient" placeholder="Prenom" />
            </li>
            <li>
                <input type="email" name="EmailNouveauClient" class="field-style field-split align-left requiNouveauClient EmailNouveauClient" placeholder="Email" />
                <input type="number" name="TelNouveauClient" class="field-style field-split align-right requiNouveauClient TelNouveauClient" placeholder="Telephone" />
            </li>
            <li>
                <input type="text" name="EntrepriseNouveauClient" class="field-style field-full align-none requiNouveauClient EntrepriseNouveauClient" placeholder="Entreprise..." />
            </li>
            <li>
                <input type="text" name="AdrssLine1NouveauClient" class="field-style field-full align-none requiNouveauClient AdrssLine1NouveauClient" placeholder="Adresse Ligne 1" />
            </li>
            <li>
                <input type="text" name="AdrssLine2NouveauClient" class="field-style field-full align-none AdrssLine2NouveauClient" placeholder="Adresse Ligne 2" />
            </li>
            <li>
                <input type="number" name="CodePostalNouveauClient" class="field-style field-split align-left requiNouveauClient CodePostalNouveauClient" placeholder="Code Postal" />
                <input type="text" name="VilleNouveauClient" class="field-style field-split align-right requiNouveauClient VilleNouveauClient" placeholder="ville" />
            </li>
        <!-- Bouton Ajouter Nouveau Client  -->
            <li>
                <center><input type="button" name='AjoutClient' class='AjoutNewClient' value="Ajouter client" /></center>
            </li>
        </ul>
    </form>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script>
     $('body').on('click', '.AjoutNewClient', function(event) {       
             var EmailNCF       = $(".EmailNouveauClient").val();
             var TelNCF         = $(".TelNouveauClient").val();
            if (EmailNCF == '' || TelNCF == '' ) {
                alert("please fill all required fields");
                }
             else {
                $.post("../formsTraitements/FormAddClient.php", {
                    EmailNC: EmailNCF,
                    TelNC: TelNCF
                },  function(data) {
                    alert(data);
                });
            }
        });
    </script>

PHP代码

<?php
header("Access-Control-Allow-Origin: *");
var_dump($_POST);
$EmailNC        =   $_POST['EmailNC'];
$TelNC          =   $_POST['TelNC'];
$sql = " INSERT INTO MyTable VALUES ('$EmailNC','$TelNC')"
/*
    $query = mysqli_query(" INSERT INTO MyTable VALUES ('$EmailNC','$TelNC')"); 
    if($query){
        echo "added.";
        }
    mysql_close($connexion);*/

我在我的 php 代码中接收数据。因此,请尝试使用它,看看它是否有效。