2017-04-11 142 views
0

問題

我的頁面似乎是默認我的PHP代碼,而不是通過ajax異步處理。截至目前,我的頁面只是作爲一個空白的屏幕重新加載,輸入數組成功傳遞給PHP,這是令人欣慰的,但我似乎只是在做一些錯誤的Ajax。Ajax調用提交刷新頁面

我已經試過

觀看this linkthis link後,我仍然不能似乎得到這個想通了。

當前人大常委會

下面是HTML:

<form class="cmxform" id="commentForm" method="" action=""> 
    <fieldset> 
    <legend>Please provide your name, email address (won't be published) and a comment</legend> 

    <p> 
     <label for="spinner">How much do you love science? (optional)</label> 
     <input id="spinner" name="spinner">  
    </p> 

    <p> 
     <label for="cname">Name (required, at least 2 characters)</label> 
     <input id="cname" name="name" minlength="2" type="text" required> 
    </p> 
    <p> 
     <label for="cemail">E-Mail (required)</label> 
     <input id="cemail" type="email" name="email" required> 
    </p> 
    <p> 
     <label for="curl">URL (optional)</label> 
     <input id="curl" type="url" name="url"> 
    </p> 
     <p> 
     <label for="aoi">Area of Interest (optional)</label> 
     <input id="aoi" type="text" name="aoi"> 
    </p> 
     <p> 
     <label for="currprobs">Current Problems (optional)</label> 
     <input id="currprobs" type="text" name="currprobs"> 
    </p> 
    <p> 
     <label for="ccomment">Your comment (required)</label> 
     <textarea id="ccomment" name="comment" required></textarea> 
    </p> 
    <p> 
     <input id="launch" type="submit" value="Submit"> 
    </p> 
    </fieldset> 
</form> 
    <div id="results"></div> 

這裏是JavaScript:

$(document).ready(function(){ 

    $("#commentForm").submit(function(event){ 

     /* 
     var formData = { 
      'name'    : $('input[name=name]').val(), 
      'email'    : $('input[name=email]').val(), 
     }; 
     */ 
     alert("SUCCESS?"); 
    }); 


}); 

PHP代碼返回一個div用戶已經被驗證後:

<?php 

$username = isset($_POST['name'])? trim($_POST['name']):''; 
$email= isset($_POST['email'])? trim($_POST['email']):''; 

echo '<div id=dynamicDiv> 
    <p>Hello, '.$username.'!</p> 
    <p>We look forward to contacting you at, '.$email.'</p> 
</div>'; 
?> 

Fe edback

任何想法都會感激,甚至是智力交談。代碼片段的想法,但我很欣賞任何社會能夠

編輯1

我motified的JavaScript和PHP,以反映PHP見地輸入和最佳實踐和AJAX調用,但問題仍然存在。現在

編輯2

我的目標是剛剛得到一個警報()語句我的javascript的容器內工作,阿賈克斯將是下一個步驟。

+0

您可以簡單地執行'data:$(this).serialize()'來傳遞所有表單數據。另外,沒有'encode'選項。 – Mikey

+0

編碼只是像傳遞'json'對象的功能嗎?那只是我提供的其他信息? – bmc

+0

你描述的問題通常是由不包含'event.preventDefault();'引起的,但你有這個和[我不能重現問題](http://jsbin.com/peqirab/1/edit?html ,js,輸出)使用你的代碼。我最好的猜測是,當你創建你的[mcve]時,你忽略了一些破壞JS的東西,並且阻止了'event.preventDefault();'行的到達。 – Quentin

回答

2

我認爲問題是在這裏

$("#results").html = html_i; 

您嘗試改變

$("#results").html(html_i); 

而且在PHP,你應該檢查的姓名和電子郵件

$username = isset($_POST['name'])? trim($_POST['name']):''; 
$email= isset($_POST['email'])? trim($_POST['email']):''; 
+0

似乎還有一個問題。我的頁面在瀏覽器中刷新了以下目標搜索欄:'http://cs.iupui.edu/~bmconrad/n341/html/resource_center.html?spinner=4&name=Blake&email=bmc.cs%40outlook.com&url= http%3A%2F%2Ffacebook.com&aoi = Data + Science&currprobs = 34r2r2&comment =%6034t3t'似乎存儲了我的變量,但它肯定會刷新,這種打破了我的ajax調用點。我正在更新我的代碼,以更好地反映我目前的狀態。 – bmc

+0

@bmc你把'preventDefault()'調用遲了,把它移動到開頭,然後再試一次 – Akashii

+0

@ThanhTùng - 這不是「太遲」。它可以在函數返回之前的任何時候調用。 – Quentin

-2

,則應該更換輸入型=」提交「輸入類型=」按鈕「,並在onclick函數上調用Ajax,其解決您的問題,因爲提交按鈕提交表單和Ajax調用掛起未達到400狀態。

+0

...除去...功能。按enter鍵不能再觸發提交。 –