Как отправить форму и загрузить целевую страницу внутри Div на текущей странице? - PullRequest
2 голосов
/ 11 августа 2011

Я новичок в Javascript и не приехал, чтобы найти работающий скрипт, который выполняет следующие действия:

У меня есть скрытая форма в javascript, которая должна быть отправлена ​​на событие onclick. Поля в форме используются в целевом php-файле для создания вывода. Целевой php-файл должен быть загружен в div на текущей странице без перезагрузки всей страницы.

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

Любая помощь будет принята с благодарностью!

Обновление # 1

Я сделал учебное пособие по YouTube по запросу jquery ajax, где результат отображается в div на той же странице. Я дважды проверил код много раз, и он выглядит так же, как в учебнике. В учебнике код работает, но для меня это не так. Ниже приведены все файлы, которые я использую, и код.

ajax.html:

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

//
$(document).ready(function(){

$("#button").click(function(){
var sendu = $("#username").val();
var sendp = $("#password").val();

$.ajax({
type="POST",
url: "ajax.php",
data: "username="+sendu+"&password="+sendp,
dataType: "json", 
success: function(msg,string,jqXHR){
$("#result").html(msg.name+"<br />"+msg.password);
}
});
});
});


</script>
</head>

<body>
Name:<input type="text" id="username" name="username" /><br />
Password:<input type="password" id="password" name="password" /><p>
<input type="button" id="button" value="submit" />
<p><div id="result"></div>
</body>
</html>

jquery.js из этого URL: http://code.jquery.com/jquery-1.6.2.min.js

ajax.php:

<?

$name = $_REQUEST['username'];
$password = $_REQUEST['password'];

$list = array('name'=>$name, 'password'=>$password);

$c = json_encode($list);

echo $c;
?>

Я использую сервер WAMP в качестве локального хоста, может ли он иметь какое-либо отношение к настройке?

Ответы [ 3 ]

4 голосов
/ 11 августа 2011

Поскольку вы не указали код, мне придется угадать:

1) У вас есть код AJAX для загрузки ответа php в подразделение, но страница все еще обновляется, и в этом случае - при отправке формы вам нужно предотвратить запуск события по умолчанию, сделайте это с помощью:

event.preventDefault();

Отметьте, что в первую очередь функция, которая выполняется, выполняется внутри onClick (). Теперь все должно работать. Между прочим, вы, вероятно, хотите вместо этого использовать onSubmit (), если кто-то нажимает «Enter» вместо нажатия кнопки «Отправить» (хотя я не уверен, является ли это частью стандартного javascript / DOM). Проверьте библиотеку javascript под названием JQuery, она делает javascript легким делом.

2) Вы на самом деле хотите AJAX, и в этом случае перейдите на jquery.com, загрузите их библиотеку javascript и пройдите несколько руководств по запросам ajax. Основы примерно такие:

$("#id_of_your_form").submit(function(event){
    event.preventDefault();
    $.post( url_of_php_file, $("#id_of_your_form").serialize(), function(data){
        $("#id_of_your_div").html(data);
    });
});

Этот код является базовым, но он должен работать, если вы не забыли включить файл библиотеки в ваш HTML-файл.

# ОБНОВЛЕНО

Есть ли какая-то особая причина, по которой вы используете объект JSON? Я просто не использовал его раньше себя, поэтому мой вклад здесь может быть ограничен. Попробуйте это:

ajax.html

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

//
$(document).ready(function(){

    $("#button").click(function(event){ //don't forget to pass the event as an argument

        //need this, or your page will follow the url defined in the form
        event.preventDefault();

        var sendu = $("#username").val();
        var sendp = $("#password").val();

        $.ajax({
        type: "POST",
        url: "ajax.php",
        data: "username="+sendu+"&password="+sendp, /*shouldn't the method be GET then?*/
        dataType: "json", 
        success: function(msg){
            $("#result").html(msg.name+'<br />'+msg.password);
        }
        });
    });
});


</script>
</head>

<body>
    <form action="miss.php" method="post">
        Name:<input type="text" id="username" name="username" /><br />
        Password:<input type="password" id="password" name="password" /><p>
        <input type="submit" id="button" />
    </form>
<p><div id="result"></div>
</body>
</html>

ajax.php

<?

$name = $_POST['username']; //use $_POST array instead
$password = $_POST['password'];

$list = array('name'=>$name, 'password'=>$password);

$c = json_encode($list);

echo $c;
?>

(Примечание: я не проверял код php как таковой, поскольку, как я уже сказал, я не слишком знаком с объектами JSON) Если вам не нужен объект json, попробуйте использовать стандартный текст / xml для простоты. Также рассмотрите возможность использования $. Post вместо $. Ajax , это должно упростить задачу.

Кроме того, не забывайте использовать теги form вокруг вашего ввода, иначе ваш html будет недействительным (необходима цитата) и, наконец, если вы работаете с html в своем javascript, это может хорошая идея использовать одинарные кавычки вместо двойных кавычек, чтобы указать ваши строки. Надеюсь, что это помогло.

# ОБНОВЛЕНИЕ 2

Хорошо, поскольку вам не нужен JSON для базовых вещей (оставьте JSON на потом), используйте вместо этого text / xml. Также посмотрите на комментарии. Это все должно работать, если WAMP запущен и оба файла находятся в одной папке. Вот код:

ajax.html

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

//
$(document).ready(function(){

    $("#login_form").submit(function(event){    //don't forget to pass the event as an argument

        //need this, or your page will follow the url defined in the form
        event.preventDefault();

        var sendu = $("#username").val();
        var sendp = $("#password").val();

        $.post("ajax.php", {'username' : sendu, 'password' : sendp}, function(data){
            $("#result").html(data); //data is everything you 'echo' on php side
        });

    });
});


</script>
</head>

<body>
    <form action="miss.php" method="post" id="login_form">
        Name:<input type="text" id="username" name="username" /><br />
        Password:<input type="password" id="password" name="password" /><p>
        <input type="submit" id="button" />
    </form>
<p><div id="result"></div>
</body>
</html>

ajax.php

    <?php
//you used shorthand <? as the php tag, it's probably why your code didn't work
//I would discourage using the shorthand, it's silly

$name = $_POST['username']; //use $_POST array instead
$password = $_POST['password'];

echo $name.'<br />'.$password;

?>

Если это не работает ... проверьте, работает ли у вас Skype, по какой-то причине WAMP не будет работать при включенном скайпе одновременно, это странно.

0 голосов
/ 12 августа 2011

проблема в том, что форма все еще отправляется, когда я делаю то, что вы пытаетесь сделать, я делаю это немного по-другому. попробуйте это

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function gO(frM){
    $.ajax({
        type:"POST",
        url: "ajax.php",
        data: frM.serialize(),
        dataType: "json", 
        success: function(msg,string,jqXHR){
            $("#result").html(msg.name+"<br />"+msg.password);
        }
    });
}

</script>
</head>

<body>
    <form action="" onsubmit="javascript:gO(this);return false;">
       Name:<input type="text" id="username" name="username" /><br />  
       Password:<input type="password" id="password" name="password" /><p>
       <input type="button" id="button" value="submit" />
     </form>
<p><div id="result"></div>
</body>
</html>
0 голосов
/ 11 августа 2011

Вы можете использовать Ajax. Запуск мельницы Ajax позволит вам обновить части страницы без перезагрузки страницы, которая в вашем случае отправит форму и загрузит цель на текущей странице. Я предлагаю вам начать с JQuery.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...