>웹 프론트엔드 >JS 튜토리얼 >Ajax는 데이터베이스 인스턴스에 양식을 제출합니다.

Ajax는 데이터베이스 인스턴스에 양식을 제출합니다.

小云云
小云云원래의
2018-02-23 15:05:215593검색

정적 페이지에서 데이터베이스에 양식을 제출하는 것은 매우 간단합니다

<form action="test.php" method="post">
</form>

단점은 페이지가 새로 고쳐지고 페이지가 점프한다는 것입니다. 오늘 제가 소개해드릴 기술은 ajax 폼 제출입니다. 장점은 페이지를 새로고침하지 않고 페이지로 이동하지 않고 자동으로 제출된다는 점입니다.

먼저 양식 제출 페이지가 있어야 합니다.

index.html
이 페이지는 두 부분으로 구성됩니다
1. 양식 제어
2. jQuery+ajax 처리 스크립트
jQuery 스크립트는 제출 후 양식 데이터를 얻습니다. it to api.php

b317222a318de8270818dffaffdd385c
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
    b2386ffb911b14667cb8f0f91ea547a7login test6e916e0f7d1e588d4f442bf645aedb2f
    a71ddd814d1e6bfc91cd420de31796d5
    997f162832870813a4bba3cd209ffad62cacc6d41bbb37262a98f745aa00fbf0
    8019067d09615e43c7904885b5246f0a
        function insert() {
            $.ajax({
                type: "POST",//方法
                url: "api.php" ,//表单接收url
                data: $('#form1').serialize(),
                success: function () {
                  //提交成功的提示词或者其他反馈代码
                    var result=document.getElementById("success");
                    result.innerHTML="成功!";
                },
                error : function() {
                  //提交失败的提示词或者其他反馈代码
                    var result=document.getElementById("success");
                    result.innerHTML="失败!";
                }
            });
        }
    2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
e1d846a265bf300ddc7f4a80b95329f3
    d141580f4a41fe1ee835e89737c04401
        e388a4556c0f65e1904146cc1a846bee0581997439755c399a6c92b9221be45d94b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846bee15bdbefafd8a17e62bcaf970c51328ab94b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846bee2cdb61f75629cb4e00b15553abed93b194b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846bee77361903f13dcd26502e2c12536599cd94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3
    f5a47148e367a6035fd7a2faa965022e
94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

다음은 폼 수신 페이지
api.php
이 페이지는 사실 아주 간단합니다
데이터베이스에 접속해서
데이터베이스에 삽입하는 것입니다
에 삽입된 두 값 데이터베이스는
title과 url

17154344e9e2a6fb548e020bf5ec4cb0

그러면 데이터베이스를 구축해야 합니다
데이터베이스 이름은 test이고 테이블 이름은 testdata

다음은 데이터베이스의 스크린샷입니다

Ajax는 데이터베이스 인스턴스에 양식을 제출합니다.

자, 이건 사건이 완료되었습니다.
물론 위 코드는 단순히 Ajax 양식 제출을 구현한 것뿐입니다
그러나 양식 확인, 데이터 암호화 등 최적화해야 할 세부 사항이 여전히 많이 있습니다. 스스로 확장하고 배우고 개선할 수 있습니다.

관련 권장사항:

Ajax 제출 양식 양식 페이지는 여전히 j 솔루션을 새로 고칩니다.

js 제출 양식 양식 및 매개변수 전달 구현 방법

js 양식 양식 제출 및 양식 양식 요청 경로 설정 구현 방법

위 내용은 Ajax는 데이터베이스 인스턴스에 양식을 제출합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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