如何将简单的jQuery输入与PHP脚本相关联，并将数据存储到MYSQL数据库中？

Question

我想要做的事很简单。 有一个简单的输入，它允许我输入一个名称+链接，将它添加到列表并将其保存到数据库中，以便保存它。

在我的HTML文件，我目前有：

<form id="form"> 
<input id="create-input" type="text" placeholder="To do"> 
<input id="create-link" type="text" placeholder="http://"> 
<button id="submit" type="button">Add Item</button> 
</form> 

在我的JS文件我有：

$(function(){ 
    $('#submit').on('click', addListItem); 
}); 

function addListItem() { 

    // Grab Input Data 
    var text = $('#create-input').val(); 
    var link = $('#create-link').val(); 

    // Creating To Do List 
    $('#todo').append('<li>' +text+' - '+link+ ' <button class="delete">Edit</button> <button class="delete">Delete</button> <button class="delete">Bukkaked!</button></li>'); 
    $('#create-input').val(''); 
    $('#create-link').val('http://'); 

} 

在我的PHP文件（连接到DB），我有：

<?php 
$servername = "localhost"; 
$database = "bucketlist"; 
$username = "bucketuser"; 
$password = "125632"; 

// Create connection 

$conn = mysqli_connect($servername, $username, $password, $database); 

// Check connection 

if (!$conn) { 

    die("Connection failed: " . mysqli_connect_error()); 

} 
echo "Connected successfully"; 

$sql = "INSERT INTO bucketlist (item, link) VALUES ('Thom', 'www.google.com')"; 

// Check for Success 

if (mysqli_query($conn, $sql)) { 
    echo "New record created successfully"; 
} 

// Check for Fail 

else { 
    echo "Error: " . $sql . "<br>" . mysqli_error($conn); 
} 

mysqli_close($conn); 
?> 

现在我知道我需要以某种方式将变量（文本和链接）传递给PHP文件：

$sql = "INSERT INTO bucketlist (item, link) VALUES ('Thom', 'www.google.com')"; 

但我不知道如何。 任何提示？

Answer 1

为什么你需要的JQuery，你可以使用PHP只能

这里是你的代码的改变将值： -

<form id="form" method="post" action="process.php"> 
<input id="create-input" name="item" type="text" placeholder="To do"> 
<input id="create-link" name="link" type="text" placeholder="http://"> 
<button id="submit" type="button">Add Item</button> 
</form> 
<ul> 
<?php include('conn.php'); 
    $sql = "SELECT * FROM bucketlist"; 
    $result = mysqli_query($conn, $sql); 
if (mysqli_num_rows($result) > 0) { 
    while($row = mysqli_fetch_assoc($result)) { 
    echo '<li>Item-'. $row["item"].' & Link-'. $row["link"].'</li>'; 
    } 
} else { 
    echo "<li>No List</li>"; 
} 
?> 
</ul> 

conn.php

<?php 
$servername = "localhost"; 
$database = "bucketlist"; 
$username = "bucketuser"; 
$password = "125632";  
// Create connection 
$conn = mysqli_connect($servername, $username, $password, $database); 

// Check connection 

if (!$conn) { 

    die("Connection failed: " . mysqli_connect_error()); 

} 
echo "Connected successfully"; 
?> 

process.php

<?php 
include('conn.php'); 
$item = $_POST['item']; 
$item = $_POST['link']; 
$sql = "INSERT INTO bucketlist (item, link) VALUES ($item,$link)"; 

// Check for Success 

if (mysqli_query($conn, $sql)) { 
    header('location:yourpage.php'); 
} 

// Check for Fail 

else { 
    echo "Error: " . $sql . "<br>" . mysqli_error($conn); 
} 

mysqli_close($conn); 
?> 

希望这可以帮助。

Answer 2

使用ajax将您的html表单中的项目和链接的值发布到您的PHP脚本。 喜欢的东西：

var myItem = $('#create-input').html(); 
var myLink = $('#create-link').html(); 

$.ajax({ 
type: 'POST', 
url: 'https://yoururl/api/post.php', 
data: {item:myItem,link:myLink}, 
success: SuccessCall, 
error : FailureCall, 
cache:false, 
async:true, 
dataType: 'html' 
}); 
function SuccessCall(data,status){ 
alert("response from server is "+data); 
} 
function FailureCall(data,status){ 
alert("Server connection error"); 
} 

使用由SYB发布到检索HTML表单被送到该项目和链接的值的PHP脚本。