1

私はこれに数日間苦労しており、オンラインで実際の解決策をまだ見つけていません. ユーザーがメールを入力できるフォームがあり、入力後にフェードアウトして別のフォームに置き換えられます。私は ajax を使用して、フォームから symfony2 コントローラーにデータを送信しています。これにより、データベースにデータが格納され、応答が送信されます。ただし、応答は、応答データが表示された空白のページに送信されるだけで、同じページに留まり、必要に応じてボックスをフェードアウトするだけです。私の問題は、コントローラーアクションの設定方法とルーティングファイルにあると思います。

編集

さて、問題は、送信ボタンをクリックしても何も起こらないことです。コントローラーには何も送信されないため、何も保存されず、応答もありません。私が変更したのは、@PaulPro の回答に基づいており、

<script> $('#emailForm').submit(submitForm); </script>

htmlページの最後まで。助けと洞察を前もってありがとう！

コントローラーには 2 つの関連するアクションがあります。1 つはフォームで TWIG テンプレートをレンダリングするアクションで、もう 1 つは ajax フォームの送信を処理して応答を返すアクションです。

public function emailAction()
{
    return $this->render('Bundle:email.html.twig');
}

public function submitEmailAction()
{

    $em = $this->getDoctrine()-> getEntityManager();

    $email = new Email();

    $request = $this->getRequest();

    $emailVar = $request->request->get('emailSignup');

    $email -> setEmail($emailVar);

    $em->persist($email);
    $em->flush();

    $return=array("responseCode"=>200);
    $return = json_encode($return);

    return new Response($return, 200, array('Content-Type'=>'application/json'));

}

これはこれらのアクションのルーティングであり、おそらくすべての犯人です。

Bundle_email:
pattern:  /email
defaults: { _controller: Bundle:email }
requirements:
    _method:  GET

Bundle_submitEmail:
pattern:  /submitEmail
defaults: { _controller: Bundle:submitEmail }
requirements:
    _method:  POST

次に、email.html.twig テンプレートと ajax スクリプトを示します。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="{{asset('css/styles.css')}}" rel="stylesheet" type="text/css"  />
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">

function submitForm(){
    var emailForm = $(this);
    var path = "{{path('Bundle_submitEmail')}}"

    $.ajax ( {
        type: 'POST',
        url: $("#emailForm").attr("action"),
        emailSignup: $("#emailId").val(), 
        success: function(data){

        if(data.responseCode==200 ){
            $('.email-signup-form').fadeOut();          
            $('.share-form').delay(500).fadeIn();
        }
        }

      });

 return false;
 }</script>
</head>

<body>
      <form id="emailForm" action="{{path('Bundle_submitEmail')}}" method="POST" class="email-signup-form">
        <input type="email" placeholder="e-mail address" name="emailSignup" id="emailId" required="true"/>
<input type="submit" value="Go">
      </form>
      <form class="share-form">

      </form>
<script> $('#emailForm').submit(submitForm); </script>

</body>
</html>
4

1 に答える 1

1

呼び出すことはありませんsubmitForm(ブラウザにページ全体の読み込みではなく AJAX を使用するように指示する関数)。次のようなスクリプトを body の最後に追加するだけです。

<script>
    $('#emailForm').submit(submitForm);
</script>
于 2013-07-03T00:57:06.130 に答える