Jquery로 HTML 양식 게시 데이터를 파일로 보내시겠습니까?

jQuery와 함께 게시물 데이터를 postinfo.php이라는 게시물 데이터 파일 처리기로 보내려고하지만 지금까지 만들 수 있습니다. 다음은Jquery로 HTML 양식 게시 데이터를 파일로 보내시겠습니까?

<?PHP 

$ime = $_POST['ime']; 

echo "Your name is $ime"; 
?>

: 여기

http://www.vemvo.com/test/post.php 내 postinfo.php의 코드입니다 : 당신은 여기 페이지를 볼 수 있습니다

<HTML> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
</head> 
<script type="text/javscript"> 
$('#form_id').on('submit', function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     url: "http://www.vemvo.com/test/postinfo.php", 
     data: $(this).serialize(), 
     success: function() { 
     alert('success'); 
     } 
    }); 
}); 
</script> 
<form method="post" id="form_id"> 
<input type="text" name="ime"> 
<input type="submit" id="submit" name="submit" value="Send"> 
</form>

: 여기

내 post.php 코드 위치 postinfo.php - http://www.vemvo.com/test/postinfo.php

그래서 내 실수는 어디입니까? 내가 어떻게 작동하게 할 수 있니? 이제는 데이터를 보내지 않고 성공 알림을 보내지 않습니다.

출처

2013-10-20 Tonny Struck

http://www.johnboy.com/scripts/simple-jquery-form-without-page-refresh/contact.php – Seazoux

랩 $ ('#의 form_id')에 (' – mplungjan

당신은 text/javascript가 제대로
당신은 부하의 이벤트 핸들러를 할당 할 필요가 주문해야

절대 양식을 제출하지 마십시오.
Wra P body 태그
를 사용하여 파일에 대한 올바른 DOCTYPE
에 html로 당신은

포인트 1

고정 코드 6

<!DOCTYPE html> 
<html> 
<head> 
<title>Test Ajax</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $('#form_id').on('submit', function(e){ 
     e.preventDefault(); 
     $.ajax({ 
     type: "POST", 
     url: "./postinfo.php", 
     data: $(this).serialize(), 
     success: function() { 
     alert('success'); 
     } 
    }); 
    }); 
}); 
</script> 
</head> 
<body> 
    <form method="post" id="form_id"> 
    <input type="text" name="ime"> 
    <input type="submit" value="Send"> 
    </form> 
</body> 
</html>

에 uploadify 봐 또는 How can I upload files asynchronously?을 가질 수 있습니다

출처

2013-10-20 11:55:49 mplungjan

나는 코드를 시도했지만 성공 알림을 제공하지는 않습니다. ','(function() {...}) 나는 그것도 데이터를 보내지 않을 것 같아요 .. –

제발 아무것도 부르지 마세요 이름 = 제출! – mplungjan

무엇을 의미합니까? 나는 당신이 내게 준 것과 똑같이 보이도록 내 코드를 변경했으며, 성공 경고를주지 않는다. 여기에서 볼 수 있습니다 - http://vemvo.com/test/post.php –

form 태그가 DOM에 존재하기 전에 선택기가 실행 중이므로 jQuery 선택기가 해당 양식을 찾을 수 없습니다. 문서가 준비 될 때까지 기다릴 JQuery와 기능에 포장보십시오 :

$(function() { 
    $('#form_id').on('submit', function(e){ 
     // the rest of your code 
    }); 
});

또한, 마지막에 return false에 좋은 생각이 될 수도 있습니다 더 폼의 기본 포스트 행동 억제 :

e.preventDefault(); 
$.ajax({ 
    type: "POST", 
    url: "./postinfo.php", 
    data: $(this).serialize(), 
    success: function() { 
    alert('success'); 
    } 
}); 
return false;

을

현재 양식이 정상적으로 게시됩니다. selector가 실행될 때 요소가 존재하지 않기 때문에 AJAX 핸들러가 연결되지 않으므로 일반 문서 수준 양식 게시 만 수행합니다. form 태그에 action 속성이 지정되어 있지 않으므로 페이지는 기본적으로 자체에 게시됩니다. 그냥 현재 페이지로 응답합니다.

편집 : 또한 모든 자바 스크립트 코드를 실행을 차단 한 것일 수 있습니다 오타가 :

<script type="text/javscript">

당신은 두 번째 "A"를 놓치고 있습니다.이 같아야합니다.

<script type="text/javascript">

출처

2013-10-20 11:57:40 David

그래서 데이터를 ./postinfo.php에 게시하도록 변경해야합니까? 전체 코드는 어떻게 생깁니 까? –

거짓을 반환 할 필요가 없습니다! – mplungjan

@TonnyStruck : 필자가 제안했듯이 jQuery 코드를'$ (function() {...});에 써야한다. 현재 귀하의 코드는 * form * 요소가 존재하기 전에 * 실행 중입니다. (자바 스크립트 블록이'form' 요소 위에 어떻게 있는지주의하십시오. 바로 인라인으로 실행되므로'form' 엘리먼트가 알려지기 전에 실행됩니다.) jQuery 함수로 래핑하면 전체 문서가 실행될 때까지 실행되지 않습니다 준비된. – David

Jquery로 HTML 양식 게시 데이터를 파일로 보내시겠습니까?

답변

관련 문제