2013-06-11 3 views
0

Я пытаюсь использовать форму для отправки двух переменных javascript в php-скрипт и возвращать вывод в новый Div на одной странице с помощью функции ajax. Это не работает.Почему моя функция Ajax не работает?

вот мой код

JavaScript/HTML

<link href="style/background.css" rel="stylesheet" type="text/css"> 
<script src="scripts/jquery-1.9.1.js"></script> 

<script type="text/javascript"> 
    fbPageOptions = { 
     shadowType: 'halo', 
     resizeDuration: 5.5, 
     imageFadeDuration: 4.5, 
     overlayFadeDuration: 0, 
     navType: 'both', 
     width: 580, 
     height: 405 
    }; 
</script> 

<body> 
    <div id ="userForm">Add New User 
     <br> 
     <br> 
     <form id ="form"> 
      First name: <input type="text" name="firstname" id="firstname"><br> 
      Last name: <input type="text" name="lastname" id="lastname" ><br> 
      <input type="submit" value="Submit" id="submit"> 
     </form> 
    </div> 

    <script type="text/javascript"> 
     var firstname = ""; 
     var lastname = ""; 
     $('#form').submit(function() { 
      firstname = $("input#firstname").val(); 
      lastname = $("input#lastname").val(); 
      alert(firstname + lastname); 
      $.ajax({ 
       type: "POST", 
       url: "my url is in here", 
       data: {firstname: firstname, lastname: lastname}, 
       success: function(data) { 
        $("#submitted").html(data); 
        alert("success"); 
       } 

      }); 
     }); 
    </script> 
    <br> 
    <div id="submitted"></div> 
</body> 

здесь код PHP

<?php 


$firstname = $_POST["firstname"]; 
echo "First name added is $firstname"; 
echo "<br>"; 

$lastname = $_POST["lastname"]; 
echo "Last name added is $lastname"; 

?> 

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

Большое спасибо

+0

Что именно не работает? Ajax-вызов для отправки значений в ваш php-скрипт или часть javascript для записи результата в выход html? – reporter

+1

'return false' - это то, что вам нужно в функции отправки – bipen

ответ

3

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

$('#form').submit(function() { 
    firstname = $("input#firstname").val(); 
    lastname = $("input#lastname").val(); 
    alert(firstname + lastname); 
    $.ajax({ 
    ...... 
    }); 
    return false; 
}); 
+1

только для информации OP,' return false; 'должно быть вне функции $ .ajax ({}) –

+0

Теперь я получаю еще одну ошибку: -/XMLHttpRequest не может загрузить adduser.php. Происхождение http: // localhost: 8383 не разрешено Access-Control-Allow-Origin. (11: 52: 18: 124 | error, javascript) at addUser.html –

+0

Скраб, что я добавил заголовок ('Access-Control-Allow-Origin: *'); в мой php-файл, и теперь он работает. благодаря! –

4

Форма представляет, перезагрузки страницы, необходимо, чтобы предотвратить дефолт отправить событие:

$('#form').on('submit', function (e) { 
    e.preventDefault(); 

    var firstname = $("#firstname").val(), 
     lastname = $("#lastname").val(); 

    $.ajax({ 
     type: "POST", 
     url: "my url is in here", 
     data: { 
      firstname: firstname, 
      lastname: lastname 
     } 
    }).done(function (data) { 
     $("#submitted").html(data); 
     alert("success"); 
    }); 
}); 
1

Вы должны использовать такие методы, как $ .param или .serialize отправить вам данные.

http://api.jquery.com/jQuery.param/

http://api.jquery.com/serialize/

+0

вы можете: var data = $ ('# form'). Сериализовать() и отправлять данные в ваш запрос ajax, это чище , И для ваших вторых проблем в Access-Control-Allow-Origin, это проблема с перекрестным доменом, довольно популярная, поэтому я думаю, что вы быстро найдете решение. –

+0

Опять же, не уверен, что вы получаете извините ..: -/ –

+0

Я загляну в него спасибо за совет –

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