데이터베이스 에 위 챗 애플 릿 form 폼 제출

 
 
 
1. 애플 릿 디 렉 터 리 그림

js 파일 은 논리 적 제어 로 주로 요청 과 데 이 터 를 보 내 고 받 습 니 다.

json 은 이 페이지 의 부분 설정 에 사용 되 고 전역 app. json 설정 을 덮어 씁 니 다.

wxs 는 페이지 의 스타일 설정 에 사 용 됩 니 다.

wxml 는 페이지 로 html

에 해당 합 니 다.
2. Wxml 파일 코드
      성명.            성별.          남자.      여자.            애호          여행 하 다.      책 을 보다      전동      농구공            제출 하 다.    리 셋 
* * * * * 포인트
A. Form 폼 은 submit 이 벤트 를 연결 해 야 합 니 다. 애플 릿 에서 속성 은 bidsubmit 입 니 다.
bindsubmit=”formSubmit”   이 속성 값 formSubmit 은 규범 에 맞 는 임의의 값 으로 이전 html 에 해당 합 니 다.  οnsubmit = "formSubmit ()" 는 함수 이름 입 니 다. 제출 할 때 formSubmit 이 함수 이 벤트 를 촉발 합 니 다. 이 함 수 는 js 에 적 혀 있 습 니 다.
B. 다른 속성 은 이전 HTML 과 차이 가 많 지 않 습 니 다. 주의해 야 할 것 은 폼 에 name = "value" 가 있어 야 합 니 다. 백 엔 드 처 리 는 이전 과 같 습 니 다. 예 를 들 어 name = "username" PHP 는 $ 를 사용 할 수 있 습 니 다.POST [username] 받 으 러 왔 습 니 다.
C. 애플 릿 에 input submit 이라는 단추 가 없 기 때문에 모든 form 폼 에 제출 버튼 이 있어 야 합 니 다.
제출, 이 단 추 는 제출 이 벤트 를 여 는 데 사 용 됩 니 다.
3. js 코드

//index.js
//      
const app = getApp()
Page({
  data: {
  },
  formSubmit: function (e) {     
    //console.log(e.detail.value);
    if (e.detail.value.xingming.length == 0 || e.detail.value.xingming.length >= 8) {
      wx.showToast({
        title: '         !',
        icon: 'loading',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    } else if (e.detail.value.xingbie.length == 0) {
      wx.showToast({
        title: '      !',
        icon: 'loading',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    } else if (e.detail.value.aihao.length == 0) {
      wx.showToast({
        title: '      !',
        icon: 'loading',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    } else {
      wx.request({
        url: '    ',
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        method: "POST",
        data: { xingming: e.detail.value.xingming, xingbie: e.detail.value.xingbie, aihao: e.detail.value.aihao },
        success: function (res) {
          console.log(res.data);
          if (res.data.status == 0) {
            wx.showToast({
              title: '    ！！！',
              icon: 'loading',
              duration: 1500
            })
          } else {
            wx.showToast({
              title: '    ！！！',//         
              icon: 'success',
              duration: 1000
            })
          }
        }
      })
    }
  },
})

* * * * * js 중 주의해 야 할 것 은
Page () 이 방법 은 반드시 있어 야 합 니 다. 안에 js 대상 을 설치 하여 페이지 로 딩 할 때 효 과 를 나타 냅 니 다.
data: {}, 데이터 대상, 페이지 의 데 이 터 를 설정 합 니 다. 전단 은 이 대상 의 데 이 터 를 읽 어서 표시 할 수 있 습 니 다.
formSubmit: function 작은 프로그램 에서 방법 은 모두 방법 명: function () 입 니 다. 그 중에서 function 은 하나의 매개 변 수 를 입력 하여 현재 시간 을 촉발 할 수 있 습 니 다.
(여기 e 는 현재 트리거 이벤트 의 대상 입 니 다. html 와 유사 합 니 다.οnclick = "foo (this)" this 대상, 애플 릿 은 내 장 된 호출 방법 을 많이 패키지 합 니 다.
e. detail. value. xingming 은 현재 대상 name = "xingming" 의 대상 값 입 니 다. e. detail. value. xingming. length 가 바로 이것 입 니 다.
개 값 의 길이 show Toast 는 JS 의 alert, 팝 업 상자, title 과 유사 합 니 다. 팝 업 상자 에 표 시 된 정보 입 니 다. icon 은 팝 업 상자 의 아이콘 상태 입 니 다. 현재
loading 과 success 두 상태 만 있 습 니 다. duration 은 팝 업 상자 가 화면 에 표시 되 는 시간 입 니 다.)
포인트 가 왔 습 니 다.
      wx.request({         url: '인터페이스 경로',        header: {           "Content-Type": "application/x-www-form-urlencoded"         },         method: "POST",         data: { xingming: e.detail.value.xingming, xingbie: e.detail.value.xingbie, aihao: e.detail.value.aihao },         success: function (res) {           console.log(res.data);           if (res.data.status == 0) {             wx.showToast({               제목: '제출 실패!!',              icon: 'loading',               duration: 1500             })           } else {             wx.showToast({               title: '제출 성공!!!', / / 로그 인 성공 출력              icon: 'success',               duration: 1000             })           }         }
wx. request ({}) 는 애플 릿 이 https 요청 을 하 는 것 입 니 다. http 에 주의 하면 안 됩 니 다.
wx. request ({}) 는 애플 릿 이 https 요청 을 하 는 것 입 니 다. http 에 주의 하면 안 됩 니 다.
여기, 이곳
A. url 은 당신 이 요청 한 사이트 입 니 다. 예 를 들 어 예전 에 전단, POST 폼 에서 action = 'index. php', 여기 index. php 는 상대 적 인 경로 이 고 애플 릿 입 니 다.
요청 한 주 소 는 네트워크 의 절대 경로 여야 합 니 다. 예 를 들 어:https://www.xxxxxcom/wx/form.php
B.
header: {       "Content-Type": "application/x-www-form-urlencoded"     }, POST 와 GET 가 데 이 터 를 전송 하 는 방식 이 다 르 기 때문에 POST 의 header 는 반드시
"Content-Type": "application/x-www-form-urlencoded"   GET 의 header 는 'Accept': 'application / json' 일 수 있 습 니 다.
C. method: "POST"  기본 값 "GET", 대문자 유지
data: {xingming: e. detail. value. xingming, xingbie: e. detail. value. xingbie, aihao: e. detail. value. aihao}, 여기 data 는 POST 가 서버 쪽 의 데 이 터 를 {name: value} 로 전송 하 는 것 입 니 다.
D. 리 셋 함수 성공
     success: function (res) {          // console.log(res.data);           if (res.data.status == 0) {
            wx.showToast({
              제목: '제출 실패!!',
              icon: 'loading',
              duration: 1500
            })
          } else {
            wx.showToast({
              제목: '제출 성공!!!',
              icon: 'success',
              duration: 1000
            })
        }
        } E. success: function () 은 요청 상태 가 성공 적 으로 촉발 되 었 을 때 이벤트 입 니 다. 즉, 200 일 때 주의 하 세 요. 요청 성공 은 조작 성공 이 아 닙 니 다. 요청 은 이것 뿐 입 니 다.
서버 쪽 에 프로그램 이 연결 되 어 있 습 니 다.
F.  if (res.data.status == 0) {
  wx.showToast({
              제목: '제출 실패!!',
              icon: 'loading',
              duration: 1500
              })
          } 
하 나 를 더 하면 단독으로 쓴 사건 도 가능 하 다.

  saveEvaluate:function (e){
    let that = this;
    let answerPaths = this.data.listData.studentQuestionList[this.data.m].answerPaths;
    let studentId = this.data.listData.studentQuestionList[this.data.m].studentId;
    request.post({
      url:     ,
      data: {
        photoId: this.data.detail.homeworkId,
        userId: studentId,
        photoRemark: e.detail.value.photoRemark,
        photoScore: e.detail.value.photoScore,
        answerPaths: answerPaths,
        access_token: app.getToken()
      }
    }).then(res => {
      if (res.data.code == 200) {
        that.setData({
          studentList: that.data.studentList,
          completeStudentList: that.data.completeStudentList
        })
        //        
        wx.navigateTo({
          url: '/pages/xxx/xxx/xxx',
        })
      }
    })
  }

 
학습 링크:https://blog.csdn.net/wydd7522/article/details/80724526