ajax php sqlをリフレッシュせずに

-2

私はajaxに慣れていないので、フォームが提出され/更新された後に完全にリフレッシュされないように、1つのPHPページとajaxを使用してフォームを送信しようとしています。 phpページは親ページのdivセクションにロードされます。ajax php sqlをリフレッシュせずに

ページ全体をリフレッシュせずにフォームを送信する方法を正しい方向で教えてもらえますか？

私はこれまでのコードの下に、それはすべての1つのPHPファイルです。最初

<?php 
$servername = "data"; 
$username = "data"; 
$password = "data"; 
$database = "data"; 
$successAdd=""; 
$errorAdd=""; 
$connect = mysql_connect($servername, $username, $password) or die("Not Connected"); 
mysql_select_db($database) or die("not selected"); 
if (isset($_POST['Add'])) { 

$venueName = $_POST['cname']; 
$file = $_FILES['file']; 
$file_name = $file['name']; 
$file_tmp = $file['tmp_name']; 
$file_size = $file['size']; 
$file_error = $file['error']; 
$file_ext = explode('.', $file_name); 
$file_ext = strtolower(end($file_ext)); 
$allowed = array('png'); 
if (in_array($file_ext, $allowed)) { 
    if ($file_error == 0) { 
     $file_name_new = $venueName . '.' . $file_ext; 
     $file_destination = 'images/category/' . $file_name_new; 
     if (move_uploaded_file($file_tmp, $file_destination)) { 
      $sql = "INSERT INTO `categorytable`(`category`) VALUES ('$venueName')"; 
      $result = mysql_query($sql, $connect); 
      if ($result != 0) { 
       $successAdd = "Success fully done"; 
      } else { 
       $errorAdd = "Not done "; 
      } 
     } 
    } else { 
     $errorAdd = "Something is wrong"; 
    } 
} else { 
    $errorAdd = "Only png file allowed"; 
} 
} 


if (isset($_POST['Update'])) { 
    $venueName = $_POST['cname']; 
    $file = $_FILES['file']; 
    $file_name = $file['name']; 
    $file_tmp = $file['tmp_name']; 
    $file_size = $file['size']; 
    $file_error = $file['error']; 
    $file_ext = explode('.', $file_name); 
    $file_ext = strtolower(end($file_ext)); 
    $allowed = array('png'); 
    if (in_array($file_ext, $allowed)) { 
     if ($file_error == 0) { 
      $file_name_new = $venueName . '.' . $file_ext; 
      $file_destination = 'images/category/' . $file_name_new; 
      if (move_uploaded_file($file_tmp, $file_destination)) { 
      $successAdd = "Success fully done"; 
      }else{ 
      $errorAdd = "Not Updated"; 
      } 
     } else { 
      $errorAdd = "Something is wrong"; 
     } 
    } else { 
     $errorAdd = "Only png file allowed"; 
     } 
    } 
?> 

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Test</title> 




    </head> 
    <body> 
    <h3 style="color: red"><?php echo $errorAdd; ?></h3> 
    <h3 style="color: green"><?php echo $successAdd; ?></h3> 
    <!--<div style="float: left;width: 50%">--> 
    <h1>Add Category</h1> 
    <form action="" method="POST" enctype="multipart/form-data" id="add-category" > 
     Category Name <input type="text" name="cname" value="" /><br/> 
     Category Image <input type="file" name="file" accept="image/x-png"/><br/> 
     <input type="submit" value="Add" name="Add"/> 
    </form> 
    <!--</div>--> 

    <!--<div style="float: left;width: 50%">--> 
    <h1>Update Category</h1> 
    <form action="addCategory.php" method="POST" enctype="multipart/form-data" > 
     Select Category<select name="cname"> 
      <?php 
      $sql = "SELECT * FROM `categorytable`"; 
      $result = mysql_query($sql); 
      while ($row = mysql_fetch_array($result)) { 
       ?> 
       <option value="<?php echo $row[1]; ?>"><?php echo $row[1]; ?></option> 
      <?php } ?> 
     </select><br/> 
     Category Image <input type="file" name="file" accept="image/x-png"/><br/> 
     <input type="submit" value="Update" name="Update"/> 
    </form> 
    <!--</div>--> 

    <div style="width: 25%;margin: 20px auto;float: left"> 
     <table border="1"> 
      <tr> 
       <th>Category Name</th> 
       <th>Category Image</th> 
      </tr> 
      <?php 
      $sql = "SELECT * FROM `categorytable`"; 
      $result = mysql_query($sql); 
      while ($row = mysql_fetch_array($result)) { 
       ?> 
       <tr> 
        <td><?php echo $row[1]; ?></td> 
        <td> 
         <img src="images/category/<?php echo $row[1]; ?>.png" height="50"/> 
        </td> 
       </tr> 

       <?php 
      } 
      ?> 
     </table> 

    </div> 


</body>

出典

2016-09-14 J.Rem

どのようなajax？そこには全くアヤックスはありません。 JavaScript、期間はありません。 –

私たちは 'mysql_connect'を避けて始めるべきです:) –

これを確認してください[AJAXチュートリアル]（http://stackoverflow.com/questions/6009206/what-is-ajax-and-how-does-it-work） –

まず、物事をありがとう、できるだけ早く、PDOにスワップ。これにより時間が節約され、正しく使用されたときにSQL実行時間を助けることができます（PDOチュートリアルhereを参照）。質問に答えるには、まずjQueryライブラリをインポートすることをお勧めします。それは、DOMを簡単に操作できるようにします。

はその後、ちょうど今

data: $('#your-form-id-here).serialize() <-- This gets all of your form data ready

NOTE少しそれを打破することができます

$('#your-form-id-here').submit(function(clickEvent){ 
    $.ajax({ 
     url: 'http://www.foo.com/', 
     data: $('#your-form-id-here').serialize(), 
     method: 'POST', 
     success: function(Response){ 
      //If the request is successful, this code gets executed 
     }, 
     error: function(){ 
      //If the request failed, this code gets executed 
     } 

    }); 

    return false; <----This prevents the page from refreshing 
});

ような何かを実行します。これよりもそれへの道よりはあります。この作業を正しく行うには、サーバーサイドの作業を行う必要があります。たとえば、JSONオブジェクトを戻したい場合は、戻す必要があります。 PHPで、私は何かのようにしたい

if(My request succeeded){ 
    echo(json_encode(array(
     'status' => 'success', 
     'message' => 'Request description/whatever you want here' 
    ))); 
}

出典

2016-09-14 20:24:51

ネイティブ、ありがとう、私はそれをやろうとしましたが、jqueryライブラリをインポートしました。何らかの理由でデータがデータベースに送られませんでしたが、成功イベントは発生しますが、データはまったく送信されません。 –

私は一歩踏みました。データ型が "json"の場合、有効なjsonオブジェクトを取得するたびにsuccess関数が呼び出されます（必ずしも要求が成功したというわけではありません）。ですから、成功関数でconsole.log（Response）を試して、devコンソールをチェックインして、サーバが何を返信しているかを確かめてください。 –

Nothing Nada。私はindex.phpを持っており、上のコードの内容をロードします：addCategory.phpをdivの "container"にロードします。ですから、私はindex.php全体をリフレッシュさせたくありません。私はデータが提出された後、addCategory.phpのセクションを更新するだけです。 –

ajax php sqlをリフレッシュせずに

答えて

関連する問題