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

집

웹 프론트엔드

HTML 튜토리얼

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

黄舟

May 26, 2018 pm 04:32 PM

form html 페이지

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.