連絡フォームバックエンドが必要、フロントエンドが指定されました

Question

私はpro + planでcarrd.coにウェブサイトをホストしていました。私は、ウェブサイトをダウンロードしてそれを自分のサーバーにホストする可能性があるため、高価なプランを選択しました。

わかりませんでしたが、これにはサーバー側のコードは含まれていませんでした。

私の問題は、私はフロントエンドのコードを持っているが、私が試したすべてのPHPコードがこのコードとやり取りできないことです。私はJavaでしか開発できないので、自分で解決することはできません。

問題は、このフォームをユーザーが送信したときに電子メールを送信できるように、このコードをサーバー上で動作させることが次のステップであるかどうかわかりません。私はバックエンドコードを持っておらず、どこから始めるべきかわからない。

1）ここでは、この要求に答えるためにPHPファイルを置くことができますか？どのように私はそれに名前を付ける必要がありますか？

2）どのように引数を解析できますか？

3）私はどのようにPHPスクリプトからajaxスクリプトへの回答をフォーマットする必要がありますか？

ここでお手伝いしますか？どうもありがとう！！！

（あなたは完全なソリューションを提供するために気にすることはできません場合、私はさらにいくつかの良いヒントをこの問題を解決することができるかもしれない、私はどんなアドバイスを感謝！）

フロントエンドのコード：

フォーム：

<form id="form02" method="post"> 
         <div class="inner"> 
          <div class="field"><input type="text"  name="name" id="name" placeholder="Name" 
                 maxlength="128"/></div> 
          <div class="field"><input type="email" name="email" id="email" 
                 placeholder="Email" maxlength="128"/></div> 
          <div class="field"><input type="text" name="fname" id="-fname" placeholder="Fname" 
                 maxlength="128"/></div> 
          <div class="field"><textarea name="message" id="message" placeholder="Message" 
                 maxlength="16384"></textarea></div> 
          <div class="actions"> 
           <button type="submit">Send Message</button> 
          </div> 
         </div> 
         <input type="hidden" name="id" value="form02"/> 
</form> 

スクリプト：

function form(id, settings) { 
var _this = this; 
this.id = id; 
this.mode = settings.mode; 
this.method = settings.method; 
this.success = settings.success; 
this.preHandler = ('preHandler' in settings ? settings.preHandler : null); 
this.failure = ('failure' in settings ? settings.failure : null); 
this.optional = ('optional' in settings ? settings.optional : []); 
this.$form = $('#' + this.id); 
this.$form.addEventListener('submit', function (event) { 
    _this.submit(event); 
}); 
this.$form.addEventListener('keydown', function (event) { 
    if (event.keyCode == 13 && event.ctrlKey) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     _this.submit(event); 
    } 
}); 
var x = $('#' + this.id + ' input[name="' + settings.hid + '"]'); 
if (x) { 
    x.disabled = true; 
    x.parentNode.style.display = 'none'; 
} 
this.$submit = $('#' + this.id + ' button[type="submit"]'); 
this.$submit.disabled = false; 
};form.prototype.notify = function (type, message) { 
if (message.match(/^(#[a-zA-Z0-9\_\-]+|[a-z0-9\-\.]+:[a-zA-Z0- 9\~\!\@\#$\%\&\-\_\+\=\;\,\.\?\/\:]+)$/)) location.href = message; else alert((type == 'failure' ? 'Error: ' : '') + message); 
}; 

form.prototype.submit = function (event) { 
var _this = this, result, handler, fd, k, x, $f, $ff; 
event.preventDefault(); 
if (this.$submit.disabled) return; 
result = true; 
$ff = this.$form.elements; 
for (k in $ff) { 
    $f = $ff[k]; 
    if ($f.type != 'text' && $f.type != 'email' && $f.type != 'textarea' && $f.type != 'select-one') continue; 
    if ($f.disabled) continue; 
    if ($f.value === '' || $f.value === null) { 
     if (this.optional.indexOf($f.name) !== -1) continue; 
     result = false; 
    } else { 
     x = ''; 
     switch ($f.type) { 
      case 'email': 
       x = "^([a-zA-Z0-9\\_\\-\\.\\+]+)@([a-zA-Z0-9\\-  \\.]+)\\.([a-zA-Z]+)$"; 
       break; 
      case 'select': 
       x = "^[a-zA-Z0-9\\-]$"; 
       break; 
      default: 
      case 'text': 
      case 'textarea': 
       x = "^[^\\<\\>]+$"; 
       break; 
     } 
     result = result && $f.value.match(new RegExp(x)); 
    } 
    if (!result) break; 
} 
if (!result) { 
    this.notify('failure', 'Missing and/or invalid fields. Please try again.'); 
    return; 
} 
if (_this.method == 'get') { 
    _this.$form.submit(); 
    return; 
} 
if (x = $(':focus')) x.blur(); 
this.$submit.disabled = true; 
this.$submit.classList.add('waiting'); 
handler = function (values) { 
    var x, k, data; 
    data = new FormData(_this.$form); 
    if (values) for (k in values) data.append(k, values[k]); 
    x = new XMLHttpRequest(); 
    x.open('POST', ['', 'post', _this.mode].join('/')); 
    x.send(data); 
    x.onreadystatechange = function() { 
     var result = false, message = 'Sorry, something went wrong. Please try again later.', alert = true, o; 
     if (x.readyState != 4) return; 
     if (x.status == 200) { 
      o = JSON.parse(x.responseText); 
      if (o) { 
       if ('result' in o) result = (o.result === true); 
       if (('message' in o) && o.message) message = o.message; 
       if ('alert' in o) alert = (o.alert === true); 
      } 
     } 
     _this.$submit.classList.remove('waiting'); 
     if (result) { 
      _this.$form.reset(); 
      if (alert) window.alert(message); else _this.notify('success', (_this.success ? _this.success : message)); 
     } else { 
      if (alert) window.alert(message); else _this.notify('failure', (_this.failure ? _this.failure : message)); 
     } 
     _this.$submit.disabled = false; 
    }; 
}; 
if (_this.preHandler) (_this.preHandler)(_this, handler); else (handler)(); 
}; 
new form('form02', {mode: 'contact', method: 'post', hid: 'fname', success: '#contact-done',}); 

Answer 1

は、HTMLフォームが正常にを使用していますパラメータを使用して、スクリプトがフォームデータを送信するURLを指定します。しかし、あなたのjavascriptコードはURLに戻って/post/contactにajax投稿を作成するようにハードコードされているように見えます。これはあなたが試した例がうまくいかない理由を説明するかもしれません。

はい、レスポンスを処理するには、サーバー上で何らかの種類のスクリプトが必要ですが、PHPである必要はありません。ホスティングプロバイダがサポートしているものは何でも、何をしたいのかを処理できるものデータ。