ajax php sql без обновления

-2

Я не знаком с ajax, и я пытаюсь отправить форму с помощью одной страницы PHP и ajax, чтобы после отправки/обновления формы страница не обновлялась полностью. php-страница загружается в раздел div родительской страницы.ajax php sql без обновления

Может ли кто-нибудь указать мне в правильном направлении, как отправить форму, не обновляя всю страницу?

Ниже кода, который у меня есть до сих пор, и все это только в одном файле 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

Какой аякс? Аякса там вообще нет. Нет javascript, период. –

Мы должны начать с того, чтобы избегать 'mysql_connect' :) –

Проверьте [Учебник AJAX] (http://stackoverflow.com/questions/6009206/what-is-ajax-and-how-does-it-work) –

Первые вещи первых, подкачку PDO, как можно скорее. Это сэкономит вам время TONS и может помочь с временем выполнения SQL при правильном использовании (вы можете найти быстрый учебник PDO here). Чтобы ответить на вопрос, я бы рекомендовал начать с импорта библиотеки jQuery. Это позволяет почти легко манипулировать DOM.

Тогда просто сделать что-то вроде

$('#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 
});

Теперь давайте разбить его немного

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

ПРИМЕЧАНИЕ: Там в путь больше, чем это. Вам нужно будет сделать некоторые серверные вещи, чтобы сделать эту работу правильной. Например, если вы хотите вернуть объект 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

Спасибо, Native, я попытался это сделать, и я также импортировал библиотеку jquery, данные по какой-то причине не попадают в базу данных, она проходит через событие успеха, но, похоже, не передает никаких данных вообще. –

Один из них, с которым я столкнулся. если тип данных «json», функция успеха будет вызвана каждый раз, когда вы вернете действительный объект json (это не обязательно означает, что ваш запрос преуспел). Поэтому попробуйте console.log (Response) в функции успеха и проверьте консоль dev, чтобы точно увидеть, что сервер отправляет обратно. –

Ничего Нада. У меня есть index.php, и я загружаю содержимое вышеприведенного кода: addCategory.php в div-контейнер. Поэтому я не хочу, чтобы весь index.php обновлялся. Я просто хочу, чтобы раздел из addCategory.php обновлялся после отправки данных. –

ajax php sql без обновления

ответ

Смежные вопросы