试图在同一页面中从php加载响应表

Question

I'm trying to load a response from the php onto the same page. My Client side html looks like this.

<p>
    <script type="text/javascript">// <![CDATA[
        function sendForm() {
            var dataSend = "?ClientName=" + $("#ClientName").val();

            $.post("AddClient.php", dataSend, function(data) {
                $("#responseDiv").html(data);
            });
    // ]]></script>
</p>
<div id="responseDiv"> </div>
<form action="AddClient.php" onsubmit="sendForm()">
    <h1>Client Wizard <span>Please fill all the texts in the fields.</span></h1>
    <label> <span>Client Name :</span> <input id="ClientName" type="text" name="ClientName" /> </label> <span> </span> <input class="button" type="Submit" value="Send" />
</form>

My Server side php looks like this:

<?php
$dbhost='127.0.0.1';
$dbuser='name';
$dbpass='password';
$dbname='dbname';
$conn=mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);
if(!$conn)
{
    die('Could not connect:'.mysqli_connect_error());
}
$client=$_REQUEST["ClientName"];
$retval=mysqli_query($conn,"INSERT into client (clientid,clientname) VALUES (NULL,'$client')");
if(!$retval)
{
    die('Could not add client:'.mysql_error());
}
$display_string="<h1>Client Added Successfully</h1>";
echo $display_string;
mysqli_close($conn);
?>

Unfortunately not only is the response being shown in anew html page, Its not accepting any name typed in the form. When I check the sql table the Column has a blank entry under it. I have not been able to figure out where I'm going wrong. Any help would be really appreciated.

Answer 1

All right. Your code have some room for improvement, but it's not an endless thing.

I saw somebody mention sanitization and validation. Alright, we got that. We can go in details here

This is how I will restructure your code using some improvements made by Samuel Cook (thank you!) and added a lot more.

index.html

<p>
    <script type="text/javascript">// <![CDATA[
        function sendForm() {
            var dataSend = {clientName: $('#clientName').val()}

            $.post("AddClient.php", dataSend, function(data) {
                $('#responseDiv').html(data);
            });

            return false;
        }
    //]]>
    </script>
</p>
<div id="responseDiv"></div>
<form action="AddClient.php" onsubmit="sendForm(); return false;">
    <h1>Client Wizard <span>Please fill all the texts in the fields.</span></h1>
    <label><span>Client Name :</span><input id="clientName" type="text" name="clientName"/><span></span><input type="submit" class="button" value="Send"></label>
</form>

Notice change in an input id and input name - it's now start with a lower case and now clientName instead of ClientName. It's look a little bit polished to my aesthetic eye.

You should take note on onsubmit attribute, especially return false. Because you don't prevent default form behavior you get a redirect, and in my case and probably your too, I've got two entries in my table with a empty field for one.

Nice. Let's go to server-side.

addClient.php

<?php

$dbhost = '127.0.0.1';
$dbuser = 'root';
$dbpass = '123';
$dbname = 'dbname';


$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
if (!$conn) {
    die('Could not connect: ' . mysqli_connect_error());
}

$client=$_REQUEST["clientName"];
$client = filter_var($client, FILTER_SANITIZE_STRING);

if (isset($client)) {
    $stmt = $conn->prepare("INSERT into client(clientid, clientname) VALUES (NULL, ?)");
    $stmt->bind_param('s', $client);

    $stmt->execute();
}

if (!$stmt) {
    die('Could not add client:' . $conn->error);
}
$display_string = "<h1>Client $client Added Successfully</h1>";
echo $display_string;
mysqli_close($conn);

?>

That is going on here. We are using PHP filters to sanitize our incoming from somewhere string.

Next, we check if that variable $client even exist (you remember that twice sended form xhr? Double security check!)

Here comes a fun part - to protect our selves even more, we start using prepared mySQL statements. There is no way someone could SQL inject you somehow.

And just check for any errors and display it. Here you go. I've tested it on my machine, so it works.