JQuery AJAX пост-отправка в PHP-скрипт несколько раз - PullRequest
Новая
       20

JQuery AJAX пост-отправка в PHP-скрипт несколько раз

2 голосов
/ 12 сентября 2011

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

Я хотел бы иметь возможность сделать несколько представлений с новыми данными, распространяющимися в текущий элемент.Чего мне не хватает?

Вот моя первая страница form.php 

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
    <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

<script type="text/javascript">
    //<![CDATA[
    jQuery.noConflict();
    jQuery(document).ready(function () {
        jQuery("#form").validate({
            debug: false,
            submitHandler: function (form) {
                jQuery.post('formPost.php',
                    jQuery("#form").serialize(), function (data) {
                    jQuery('#Box').html(data);
                });
            }
        });
    });
    // ]]>
</script>

  </head>
  <body>
    <div id="Box">
      <form id="form" name="form" method="POST" action="">
        <select name="color">
          <option>red</option>
          <option>white</option>
          <option>blue</option>
        </select>
        <input type="submit" name="submit" value="submit" /><br />
      </form>
    </div>
  </body>
</html>

, а вот моя вторая страница formPost.php 

<?php

  switch ($_POST['color'])
  {
    case 'red':
      echo 'you chose red<br /><br />';
      break;

    case 'blue':
      echo 'you chose blue<br /><br />';
      break;

    case 'white':
      echo 'you chose white<br /><br />';
      break;
  }
?>
<form id="form" name="form" method="POST" action="">
  <select name="color">
    <option>red</option>
    <option>white</option>
    <option>blue</option>
  </select>
  <input type="submit" name="submit" value="submit" /><br />
</form>

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

Ответы [ 2 ]

1 голос
/ 12 сентября 2011

Попробуйте это: 

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
    <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

<script type="text/javascript">
    //<![CDATA[
    jQuery.noConflict();
    jQuery(document).ready(function () {
        initializeForm();
    });

    function initializeForm() {
        jQuery("#form").validate({
            debug: false,
            submitHandler: function (form) {
                jQuery.post('formPost.php',
                    jQuery("#form").serialize(), function (data) {
                    jQuery('#Box').html(data);
                    initializeForm();
                });
            }

        });
    }

    // ]]>
</script>

  </head>
  <body>
    <div id="Box">
      <form id="form" name="form" method="POST" action="">
        <select name="color">
          <option>red</option>
          <option>white</option>
          <option>blue</option>
        </select>
        <input type="submit" name="submit" value="submit" /><br />
      </form>
    </div>
  </body>
</html>

Я проверил это, и оно работает для меня локально. Надеюсь, это поможет!

0 голосов
/ 12 сентября 2011

Вы подтверждаете, что действие привязано к форме, которая существует, когда документ готов (так как он находится в document.ready).Однако ваш PHP-скрипт заменяет эту форму другой формой, поэтому проверяемая форма больше не существует.Когда вы привязываете события, вы можете использовать что-то вроде live binding , чтобы обойти это.Вы, вероятно, не можете использовать это с плагином проверки, хотя.Что вы действительно должны делать, так это писать свой ответ на другой элемент.

Итак, что-то вроде этого: 

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    jQuery.noConflict ();
    jQuery(document).ready(function(){
      jQuery("#form").validate({
        debug: false,
        submitHandler: function(form) {
        jQuery.post('formPost.php', 
                     jQuery("#form").serialize(), 
                     function(data) {
                       jQuery('#result').html(data); // Note that this modifies #result instead of #Box.
                     });
        }
      });
    });
    // ]]>
  </script>
</head>
<body>
  <div id="Box">
    <form id="form" name="form" method="POST" action="">
      <select name="color">
        <option>red</option>
        <option>white</option>
        <option>blue</option>
      </select>
      <input type="submit" name="submit" value="submit" /><br />
    </form>
  </div>
  <div id="result" /> <!-- Here is where we put out result. -->
</body>
</html>

, а затем просто 

<?php

  switch ($_POST['color'])
  {
    case 'red':
      echo 'you chose red<br /><br />';
      break;

    case 'blue':
      echo 'you chose blue<br /><br />';
      break;

    case 'white':
      echo 'you chose white<br /><br />';
      break;
  }
?>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...