양식 양식을 HTML로 제출할 때 페이지가 이동하는 것을 방지하는 방법에 대한 자세한 설명-HTML 튜토리얼-php.cn

양식 양식을 HTML로 제출할 때 페이지가 이동하는 것을 방지하는 방법에 대한 자세한 설명

黄舟

풀어 주다： 2018-05-26 16:32:23

원래의

21776명이 탐색했습니다.

1.1 해결 방법 1
Form 작업에서 데이터를 제출하지만 페이지가 점프하지 않는 경우 Iframe을 사용하여 해결할 수 있습니다.
예:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form提交表单页面不跳转</title>
</head>
<body>
    <form action="" method="post" target="myIframe">
        <label for="input_text">账户：</label>
        <input type="text" id="input_text" name="input_text">
        <label for="input_pwd">密码：</label>
        <input type="text" id="input_pwd" name="input_text">
        <input type="submit" id="submit" name="submit" value="提交">
    </form>
    <iframe id="myIframe" name="myIframe"></iframe>
</body>
</html>

로그인 후 복사

참고: Form 요소의 target 속성은 반환된 결과를 지정하는 iframe 요소의 name 속성이어야 합니다.
Iframe 요소는 본문이나 양식 요소 어디에나 배치할 수 있습니다.
1.2 Ajax를 사용하여 구현, 새로 고침 기술 없음
javascript를 사용하여 입력 요소의 값을 직접 읽은 다음 ajax가 처리할 함수의 변수에 넣습니다.
예 - 양식 데이터를 직렬화하는 js serialize 또는 serializeArray 메서드:

<form>  
First name: <input type="text" name="FirstName" value="Bill" /><br />  
Last name: <input type="text" name="LastName" value="Gates" /><br />  
</form>  
<button id="btn">序列化表单值</button>

로그인 후 복사

$("#btn").click(function(){
var x=$("form").serializeArray();  
console.log(x); //执行结果：[{name: "FirstName", value: "Bill" },{name: "LastName",  value: "Gates" }]
var y=$("form").serialize();
console.log(y); //执行结果：FirstName=Bill&LastName=Gates 
});

로그인 후 복사

참고: serializeArray() 메서드는 json 값을 반환하고 serialize() 메서드는 문자열 값을 반환합니다.

위 내용은 양식 양식을 HTML로 제출할 때 페이지가 이동하는 것을 방지하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!