Блог

Главная - Вопросы по программированию - Отправить страницу, но не обновлять

Отправить страницу, но не обновлять

#php #jquery #html #ajax

#php #jquery #HTML #ajax

Вопрос:

Я работаю над генератором нижнего колонтитула. Который выглядит следующим образом: введите описание изображения здесь

Эта кнопка «предварительный просмотр» имеет 2 функции функция 1 публикует значения, которые пользователь ввел в черный ящик, следующим образом :

введите описание изображения здесь

и вторая функция заключается в том, чтобы показать мне кнопку (которая по умолчанию скрыта с помощью css) под названием «кнопка-форма-элемент управления-генерировать» с помощью jquery, подобного этому: 

 $("button.form-control").click(function(event){
    $("button.form-control-generate").show();
});

Теперь возникает моя проблема:

Если я нажму на предварительный просмотр, он обновит страницу.. итак, если я нажму на предварительный просмотр, он покажет скрытую кнопку примерно на 1 секунду, затем обновит страницу, и кнопка вернется к скрытому. Итак, я попытался удалить type="submit" , но если я это сделаю, введенные данные не будут публиковаться, как на изображении 2, хотя будет отображаться скрытая кнопка, но поскольку тип отправки исчез, он не будет публиковать введенные данные в черном ящике.

Вот мой код: 

 <form class ="form" method="post">

            <h3>Select your trademark</h3>

                <select class="form-control" name="trademark" action="">
                    <option></option>
                    <option>©</option>
                    <option>™</option>
                    <option>®</option>
                </select>

            <h3>Your company name</h3>

            <input class="form-control" type="text" name="companyName" placeholder="Your company name" />

                <br/>
                <br/>

            <button class="form-control" type= "submit" name="submit">
                Preview
            </button>
            <br/>
            <button class="form-control-generate"name= "submit">
                Generate
            </button>
        </form>




<!-- script for the preview image -->

        <div id = "output">
        <?php

        function footerPreview ()
        {
            date_default_timezone_set('UTC');

            $trademark = $_POST["trademark"];

            $company = $_POST["companyName"];

            $date = date("Y");

            echo "<div id='footer_date'>$trademark $date $company </div>";
        }

        footerPreview();

        ?>

jquery:

 $("button.form-control").click(function(event){
    $("button.form-control-generate").show();
});

Уже пытался предотвратить дефолт, но если я сделаю это, введенные пользователями данные не будут отображаться в окне предварительного просмотра. Похоже, что preventdefault останавливает работу этого бита:

 <!-- script for the preview image -->

        <div id = "output">
        <?php

        function footerPreview ()
        {
            date_default_timezone_set('UTC');

            $trademark = $_POST["trademark"];

            $company = $_POST["companyName"];

            $date = date("Y");

            echo "<div id='footer_date'>$trademark $date $company </div>";
        }

        footerPreview();

        ?>

Я слышал, что это возможно с помощью ajax, но я понятия не имею, как в этом случае я уже пытался посмотреть в Интернете..

Комментарии:

1. В общем смысле, вы бы использовали функцию jQuery $.ajax() для отправки формы из кода без обновления страницы. Полученный в коде ответ затем будет использоваться так, как вам нужно. Если ответ представляет собой данные JSON, вы должны использовать эти данные для обновления элементов на странице. Если ответ — HTML, вы, вероятно, заменили бы существующие элементы страницы новыми.

2. Попробуйте ajax. Он отправляет вашу форму без обновления страницы. Также у вас нет действия для вашей формы.

3. Да, ajax является основой… вот действительно хорошее введение: w3schools.com/xml/ajax_intro.asp … попытайтесь понять это и попытаться найти решение, если вы не можете, тогда вернитесь и опубликуйте свой код с частью ajax, поэтому мы поможем вам.

Ответ №1:

если у вас есть type="submit" внутри формы, она отправит форму по умолчанию. Попробуйте использовать <input type="button" вместо этого. Затем вы можете использовать ajax для действия кнопки, которое будет выполняться без обновления страницы.

Вот пример того, как использовать ajax:

 function sendAjax() {
  var root = 'https://jsonplaceholder.typicode.com';
$.ajax({
  url: root   '/posts/1',
  method: 'GET'
}).then(function(data) {
  $(".result").html(JSON.stringify(data))
});
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="button" onclick="sendAjax()" value="callAjax" />
  <div class="result"></div>
  </form>

Ответ №2:

Добавить 

 return false;

к вашей jQuery-функции в конце. С помощью этого вы можете избежать отправки.

Затем вам нужно добавить ajax-функцию, которая отправляет данные из вашей формы в php-скрипт, который вы уже используете.

Это всего лишь пример:

 $.ajax({
            url: "YOUR-PHP-SCRIPT"
        }).done(function (content) {
            // ADD HERE YOUR LOGIC FOR THE RESPONSE
        }).fail(function (jqXHR, textStatus) {
            alert('failed: '   textStatus);
        });

Ответ №3:

Итак, вам нужно выполнить post-запрос $.ajax к php. Что-то вроде этого:

 <script>
$('.form-control').click(function() {
    $.post(url, {data}, function(result) {
         footerPreview();
    }, 'json');
});
</script>

So footerPreview будет вызван, когда ваш php вернет результат.

Ответ №4:

//добавить в javascript 

 function isPostBack()
{
   return document.referrer.indexOf(document.location.href) > -1;
}

if (isPostBack()){
   $("button.form-control-generate").show();
}

Ответ №5:

вы можете создать index.php:

 <form class ="form" method="post">

            <h3>Select your trademark</h3>

                <select class="form-control" name="trademark" id="tm">
                    <option val=""></option>
                    <option val="©">©</option>
                    <option val="™">™</option>
                    <option val="®">®</option>
                </select>

            <h3>Your company name</h3>

            <input class="form-control" type="text" name="companyName" id="cn" placeholder="Your company name" />

                <br/>
                <br/>

            <button class="form-control" type= "submit" name="submit">
                Preview
            </button>
            <br/>
            <button class="form-control-generate" name= "submit" id="generate">
                Generate
            </button>
</form>

<div class="output" id="output">

</div>


<script type="text/javascript">
    $('#generate').on('click', function(e){

        e.preventDefault();
        var companyname = $('#cn').val();
        var trademark = $('#tm').val();

        $.ajax({
            url: 'process.php',
            type: 'post'.
            data: {'company':companyname,'trademark':trademark},
            dataType: 'JSON',
            success: function(data){
                $('#output').append("<div id='footer_date'>" data.trademark   " "   data.date   " "   data.company   " </div>");
            },
            error: function(){
                alert('Error During AJAX');
            }
        });

    })
</script>

и process.php:

 <?php

date_default_timezone_set('UTC');

$trademark = $_POST["trademark"];

$company = $_POST["company"];

$date = date("Y");

$array = array(
    'trademark' => $trademark,
    'company' => $company,
    'date' => $date
);

echo json_encode($array);

?>

Убедитесь, что index.php и process.php будет находиться в той же папке .. ex.public_html/index.php и public_html/process.php