表單操作成功後阿賈克斯工作

我有一個表單上傳文件。我想要執行兩個任務：一個是數據提交到數據庫並通過ajax上傳文件，並且在ajax成功後另一個將形成action.ajax正常工作，但是ajax成功後表單行爲不起作用請幫助表單操作成功後阿賈克斯工作

main.php

<!doctype html> 
<html> 
    <head> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

     <!-- Optional theme --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

     <!-- Latest compiled and minified JavaScript --> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

     <script type="text/javascript"> 
      function mycall() { 

       //disable the default form submission 
       event.preventDefault(); 

       //grab all form data 
       var formData = new FormData(document.getElementById('data')); 

       $.ajax({ 
        url: 'addToMySQL.php', 
        type: 'POST', 
        data: formData, 
        async: false, 
        cache: false, 
        contentType: false, 
        processData: false, 
        success: function (returndata) { 
         alert(returndata); 
        } 
       }); 

       return false; 
      } 
     </script> 
    </head> 
    <body> 
     <form method='post' enctype="multipart/form-data" id="data" action="try.php" > 
      <div class="form-input"> 
       <label for="exampleSelect1" class="col-md-3 control-label">Type of Paper</label> 
       <div class="col-md-9"> 
        <select class="form-control" id="Otop" name="Otop" required> 
         <option value="1">1</option> 
         <option value="2">2</option> 
         <option value="3">3</option> 
         <option value="4">4</option> 
         <option value="5">5</option> 
        </select> 
       </div> 
      </div> 

      <div class="col-md-12"> 
       <div class="form-input"> 
        <label for="exampleSelect1" class="col-md-3 control-label">Paper upload</label> 
        <div class="col-md-9"> 
         <input type="file" id="file" name="profileImg" > 
        </div> 
       </div> 
      </div> 
      <div class="form-input"> 
       <div class="col-sm-12"> 
        <input type="submit" class="btn btn-primary btn-lg btn-block" onclick="mycall()" name="OrderSubmit" value="Order"> 
       </div> 
      </div> 
     </form> 
    </body> 
</html>

addToMySQL.php

<?php 
ini_set('display_errors', 1); 
ini_set('display_startup_errors', 1); 
error_reporting(E_ALL); 
include("dbconfig.php"); 
include('class/userClass.php'); 

$userClass = new userClass(); 

$Otop   = $_POST['Otop']; 
$Odiscipline = $_FILES['profileImg']['name']; 

$target   = "uploads/";  
$fileTarget  = $target.$Odiscipline; 

$result   = move_uploaded_file($_FILES['profileImg']['tmp_name'], "uploads/".$_FILES['profileImg']['name']); 

$id    = $userClass->userOrderInfo($Otop,$Odiscipline, $fileTarget); 

if ($id) { 
    echo "done"; 
} else { 
    echo "Notdone"; 
}

userOrderInfo機能的研究中userClass.php

/* User Payment */ 
    public function userOrderInfo($Otop, $Odiscipline, $fileTarget) 
    { 
      try { 
       $db = getDB(); 

       $stmt = $db->prepare("INSERT INTO orderinfo(Otop, Odiscipline, fileTarget) VALUES (:Otop, :Odiscipline, :fileTarget)"); 
       $stmt->bindParam("Odiscipline", $Odiscipline) ; 
       $stmt->bindParam("Otop", $Otop) ; 
       $stmt->bindParam("fileTarget", $fileTarget) ; 
       $stmt->execute(); 
       $db = null; 

       return true; 

      } catch(PDOException $e) { 
       echo '{"error":{"text":'. $e->getMessage() .'}}'; 
      } 
    }

來源

2017-03-08 Manoj Mali

你是什麼意思，它不起作用？告訴我們具體的細節 –

@CamiloGo雅ajax成功後，它不去try.php這是形式的行動。 –

我沒有看到id = data的任何元素。 – scaisEdge

好得到這個明確的在我的腦海，你的代碼做的是這樣的：

的表單填寫完畢並單擊「提交」防止形式默認操作被提交。相反，這種形式定義數據，並通過AJAX並將其提交到addToMySQL.php
addToMySQL.php然後處理文件的上傳，並呼籲userOrderInfo()上userClass.php
userOrderInfo會返回一個(string)或(boolean) true兩者PHP會當作true爲一個if()聲明的目的。
addToMySQL.php返回(string) "done"到main.php
AJAX調用main.php需要從addToMySQL.php的響應的響應，並觸發與"done"內容的JavaScript警告。

因爲這已經被寫入的方式，形式永遠不會使用它的動作特性，而是將只是不斷嘗試，因爲你正在使用event.preventDefault();到窗體的內容AJAX來addToMySQL.php。

解決方案

一個快速的解決辦法是要麼添加JavaScript重定向到AJAX的成功方法，或者你想送你的用戶做的，然後填充，並把它的操作添加隱藏<form> JavaScript一旦文件上傳。

無論你決定做什麼，我會建議修復addToMySQL.php所以它不會不斷髮回"done"！

來源

2017-03-08 17:35:54 Spholt

很多很多....感謝幫助它解決了 –

沒有probs @ManojMali。如果這有幫助，請確保upvote並接受答案。這將有助於提升我的聲譽;） – Spholt

表單操作成功後阿賈克斯工作

回答

相關問題