无法通过jquery的post函数将数据发送到php脚本而无需刷新页面？

时间：2016-01-26 14:04:44

标签： php jquery ajax

我有一个表单，我不会在不刷新页面的情况下提交。我不想从这个表单中获得结果并在同一页面中使用它。

表单在我的clients表中添加了一行，所以我想要的是获取此插入行的ID并在同一页面中使用它。

我遇到的问题是我的jquery代码无法运行我想我的$ .post（..）部分有问题，但我似乎无法弄清楚它是什么。

HTML code：

<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);

1 个答案:

答案 0 :(得分：0)

我没试过，但试试这个：

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

刚刚添加＆＃34;，＆＃34;在函数（数据）之前并更改EmailNCF参数的名称

修改

我试过这个：

HTML code：

<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代码中收到数据。所以试试看它是否有效。

相关问题
最新问题