簡単なjQuery InputとPHPスクリプトをリンクし、データをMYSQL DBにリンクする方法は？

Question

私がやろうとしていることはとても簡単です。 単純な入力をして、名前+リンクを入力してリストに追加し、DBに保存して保存します。 （DBに接続している）私のPHPファイルで

$(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://'); 

} 

私が持っている：私は私のJSファイルで

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

：私は現在持っている私のHTMLファイルで

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

を

今、vars（テキストとリンク）を何とかPHPファイルに渡す必要があることが分かりました：

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

しかし、私はどう考えていません。 ヒント？あなたはここだけ

PHPを使用して値を渡すことができますjQueryのが必要なのはなぜ

Answer 1

は、あなたのコードの変化である： -

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

あなたのHTMLフォームから送信された項目とリンクの値を取得するために、SYBにより投稿されたPHPスクリプトを使用してください。