2013-07-14 3 views
1

Моя страница ajax_form.php является:Отображение АЯКС содержание одной страницы без загрузки страницы

<html><head> 
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
<meta content="utf-8" http-equiv="encoding"> 
<script> 
function showUser(form, e) { 
e.preventDefault(); 
var xmlhttp; 
var submit = form.getElementsByClassName('submit')[0]; 
var sent = document.getElementsByName('sent')[0].value || ''; 
var id = document.getElementsByName('id')[0].value || ''; 


if (sent==""){ 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
} 

if (window.XMLHttpRequest) { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
} else { 
    // code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 

xmlhttp.onreadystatechange=function(e) { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
     document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
    } 
} 
xmlhttp.open(form.method, form.action, true); 
xmlhttp.send('sent='+sent+'&id='+id+'&'+submit.name+'='+submit.value); 
} 
</script> 

<form action="ajax_test.php" method="POST"> 
Enter the sentence: <input type="text" name="sent"><br> 
<input type="submit" class="submit" name="insert" value="submit" onsubmit="showUser(this, event)"> 
</form> 

<br>UPDATE <br> 

<form action="ajax_test.php" method="POST" onsubmit="showUser(this, event)"> 
<pre> 
    Enter the ID : <input type="text" name="id"><br> 
    Enter the sentence: <input type="text" name="sent"><br> 
</pre> 
<input type="submit" class="submit" value="submit" name="update" > 
</form> <br> 
<div id="txtHint"> 
<b>Person info will be listed here.</b> 
</div> 
</body> 
</html> 

и ajax_test.php является:

<html><head> 
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
<meta content="utf-8" http-equiv="encoding"> 
</head> <body > 
<?php 
// $q = $_POST["q"]; 
// you never process the $q var so i commented it 
if (isset($_POST['insert']) && $_POST['insert'] !== '') { 
echo "Operation: Insert","<br>"; 

$s = $_POST['sent']; 

$flag = 0; 

echo "Entered sentence : $s"; 

if (preg_match_all('/[^=]*=([^;@]*)/', 
    shell_exec("/home/technoworld/Videos/LinSocket/client '$s'"), 
    $matches)){ //Values stored in ma. 
    $x = (int) $matches[1][0]; //optionally cast to int 
    $y = (int) $matches[1][1]; 
} 

echo "<br>", 
    "Positive count :$x", 
    "<br>", 
    "Negative count :$y", 
    "<br>"; 

//---------------DB stuff -------------------- 
$con = mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test'); 
if (mysqli_connect_errno()) { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
} 

$sql1 = "INSERT INTO table2 
     (id,sent,pcount,ncount,flag) 
     VALUES 
     ('','".$_POST['sent']."',' $x ','$y','$flag')"; 
if (mysqli_query($con, $sql1)) { 
    echo "1 record added"; 
} else { 
    die('Error: ' . mysqli_error($con)); 
} 


mysqli_close($con); 
} 

// -------------------------------UPDATE -------------------------- 
if (isset($_POST['update']) && $_POST['update'] !== '') { 
echo "Operation: update", "<br>"; 
// you say update but you are actually inserting below 

$s = $_POST['sent']; 
$flag = 1; 

echo "Entered sentence : $s"; 

if (preg_match_all('/[^=]*=([^;@]*)/', 
    shell_exec("/home/technoworld/Videos/LinSocket/client '$s'"), 
    $matches)) //Values stored in ma. 
{ 
    $x = (int) $matches[1][0]; //optionally cast to int 
    $y = (int) $matches[1][1]; 
} 

echo "<br>", 
    "Positive count :$x", 
    "<br>", 
    "Negative count :$y", 
    "<br>"; 

//---------------DB stuff -------------------- 
$con = mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test'); 
if (mysqli_connect_errno()) { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
} 

$sql1 = "INSERT INTO table2 
     (id,sent,pcount,ncount,flag) 
     VALUES 
     ('','".$_POST['sent']."',' $x ','$y','$flag')"; // error here again $_POST[id] should be $_POST['id'] with quotes 
if (mysqli_query($con, $sql1)) { 
    echo "1 record added"; 
} else { 
    die('Error: ' . mysqli_error($con)); 
} 

mysqli_close($con); 
} 
?></html > </body > 

В Form1 я поставил вызов функции на кнопку мыши события , который отлично работает. Но при нажатии кнопки он загружает страницу и перенаправляет ее на ajax_test.php. можем ли мы сказать, что это правильное использование ajax?

Во второй форме я сохранил вызов функции в самой форме и закодирован, как требуется в скрипте. Но при нажатии кнопки на действие происходит. Это неправильный вызов функции или любая другая ошибка?

Как я могу показать результат без загрузки страницы (обновления) в обоих случаях?

+0

@StevenMoseley: Извините, приятель, я подписался на некоторое время! Позволь мне проверить! – user123

+1

Вы не используете IE случайно? Там вам может понадобиться e.returnValue = false вместо e.preventDefault(). Еще одна причина использовать библиотеки, такие как jQuery, которые скрывают большую часть несовместимости браузера. Это упростит ваш код. – mvw

+0

@mvw: спасибо, я хочу 'e.preventDefault(); e.returnValue = false; 'не создаст проблем даже для IE! – user123

ответ

1

Проблема с вашим параметром sent - он ищет вход с именем «отправлено», которого не существует. И затем, если он не установлен, он выходит из функции .

Вот виновный фрагмент (который я извлекал ниже):

if (sent==""){ 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
} 

В дополнение к этой проблеме, вы также не имели близкие </head> или открытые <body> теги, которые сами по себе не являются проблемой, но довольно основная проблема форматирования. Кроме того, всегда ставьте type на ваш элемент <script>. Наконец, вы должны закрыть <meta />, <input /> и <br /> элементы inline. Форматирование кода последовательно (родственные элементы на своих собственных линий, 4-космические закладки для каждого heirarchical уровня) поможет найти небольшие проблемы форматирования как отсутствующего открытого тела и т.д.

Это сказало, что это работает для меня:

<html> 
<head> 
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> 
    <meta content="utf-8" http-equiv="encoding" /> 
    <script type="text/javascript"> 
    function showUser(form, e) { 
     e.preventDefault(); 
     var xmlhttp; 
     var submit = form.getElementsByClassName('submit')[0]; 
     var sent = document.getElementsByName('sent')[0].value || ''; 
     var id = document.getElementsByName('id')[0].value || ''; 

     if (window.XMLHttpRequest) { 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
     } else { 
      // code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     xmlhttp.onreadystatechange = function(e) { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
       document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
      } 
     } 
     xmlhttp.open(form.method, form.action, true); 
     xmlhttp.send('sent=' + sent + '&id=' + id + '&' + submit.name + '=' + submit.value); 
    } 
    </script> 
</head> 
<body> 
    <form action="ajax_test.php" method="POST" onsubmit="showUser(this, event)"> 
     <label>Enter the sentence: <input type="text" name="sent"></label><br /> 
     <input type="submit" class="submit" name="insert" value="submit" onsubmit="showUser(this, event)" /> 
    </form> 

    <h4>UPDATE</h4> 
    <form action="ajax_test.php" method="POST" onsubmit="showUser(this, event)"> 
     <pre> 
      <label>Enter the ID:</label> 
      <input type="text" name="id"><br> 
      <label>Enter the sentence:</label> 
      <input type="text" name="sent"><br> 
     </pre> 
     <input type="submit" class="submit" value="submit" name="update" /> 
    </form> 

    <br /> 
    <div id="txtHint"> 
     <b>Person info will be listed here.</b> 
    </div> 
</body> 
</html> 
+0

Спасибо, приятель, я узнал, как код. Но моя проблема по-прежнему сохраняется. Он ничего не показывает, как только я нажимаю кнопку. – user123

+1

Попробуйте использовать отладчик, например Firebug для Firefox. Это помогает вам узнать, что происходит, что работает и где что-то не так. Установите контрольную точку в обработчике ответа Ajax, чтобы проверить, получаете ли вы то, что вы ожидаете от вызова Ajax. Используйте точки останова вокруг innerHTML, чтобы узнать, обновляете ли вы DOM с тем, что вы ожидаете. – mvw

+0

И вкладка сети позволяет вам проверять запрос и ответ Ajax. – mvw

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